微信小程序視圖層莫名出現(xiàn)豎線的解決方法
寫完視圖層后，發(fā)現(xiàn)頁面上莫名其妙的出現(xiàn)了一些“豎線”，如下圖所示：
這段html代碼是這樣寫的：
<view class="other-des">
<view class="section">
<text class="section-num">{{course_info.SectionCount}}</text>
<text class="section-text">節(jié)課程</text>
</view>
<view class="section">
<block wx:for="{{tools.convertToHMS(course_info.Duration)}}" wx:key="index">
<text class="section-num">{{item}}</text>
<block wx:if="{{index == 0}}">
<text class="section-text">時</text>
</block>
<block wx:if="{{index == 1}}">
<text class="section-text">分</text>
</block>
<block wx:if="{{index == 2}}">
<text class="section-text">秒</text>
</block>
</block>
</view>
<view class="section">
<text class="section-num">{{course_info.PurchaseMarkup}}</text>
<text class="section-text">人最近購買</text>
</view>
</view>css樣式是這樣的：
.other-des {
margin-top: 8px;
padding: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.section {
flex: 1;
display: flex;
align-items: flex-end;
}
.section-num {
font-size: 32rpx;
color: #000000;
line-height: 32rpx;
}
.section-text {
color: #586470;
font-size: 24rpx;
line-height: 24rpx;
}真機調(diào)試也找不到 “豎線” 的元素，但是顯示其就是 section 上的一部分。那看來這豎線應(yīng)該不是自己添加了，如果是自己添加的，在真機調(diào)試的時候元素肯定是能找到的。
在界面上點擊，將鼠標(biāo)放置在豎線上的時候，才發(fā)現(xiàn)，這原來是一個滾動條…用鼠標(biāo)還可以上下滾動…
是什么原因這里盡然多了一個進度條呢，分析了一下，原因是子text在父view上范圍有超出，使用 overflow: hidden 設(shè)置父view的css。
overflow: hidden; 是一種CSS屬性，用于控制元素溢出內(nèi)容的顯示方式。
具體作用如下：
- 當(dāng)應(yīng)用于父容器時，它可以隱藏超過容器邊界的子元素內(nèi)容。
- 當(dāng)應(yīng)用于文本容器時，可以省略文字溢出的部分，并將其隱藏起來。
- 它還可以阻止?jié)L動條的顯示，使內(nèi)容不能通過滾動來查看。
使用 overflow: hidden; 可以簡單而有效地控制元素內(nèi)部內(nèi)容的可見性和溢出行為，給頁面布局和視覺效果帶來更多自定義選項。
給 section 添加 overflow: hidden 屬性設(shè)置，解決了這個問題
.section {
flex: 1;
display: flex;
align-items: flex-end;
overflow: hidden;
}實現(xiàn)效果如下：
到此這篇關(guān)于微信小程序視圖層莫名出現(xiàn)豎線的解決方法的文章就介紹到這了,更多相關(guān)微信小程序視圖層豎線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文將介紹js彈出的對話窗口永遠保持居中顯示實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了JS vs TS二分法博弈對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
JavaScript中Math對象和隨機數(shù)的實際應(yīng)用及注意事項
這篇文章主要介紹了JavaScript中Math對象和隨機數(shù)的實際應(yīng)用及注意事項,包括數(shù)值處理、極值與運算、三角函數(shù)、對數(shù)與指數(shù)、常量、隨機數(shù)生成及其應(yīng)用場景和注意事項,需要的朋友可以參考下2025-05-05
微信小程序?qū)Ш綑诨瑒佣ㄎ还δ苁纠?實現(xiàn)CSS3的positionsticky效果)
這篇文章主要介紹了微信小程序?qū)Ш綑诨瑒佣ㄎ还δ?可實現(xiàn)CSS3的positionsticky效果,涉及微信小程序事件監(jiān)聽、狀態(tài)判斷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
需正確使用new和spring，注意兩者的區(qū)別2009-03-03
這篇文章主要介紹了詳解微信小程序之提高應(yīng)用速度小技巧，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JavaScript中實現(xiàn)跨標(biāo)簽頁通信的方法詳解
跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家介紹了一下常見的跨標(biāo)簽頁通信方式,感興趣的小伙伴可以了解下2023-11-11
在JavaScript中進行錯誤處理,最常見的方式就是使用try catch語句,下面這篇文章主要給大家介紹了關(guān)于JavaScript錯誤處理的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
javascript中通過arguments參數(shù)偽裝方法重載
面向?qū)ο蟮母呒壵Z言中，都有方法的重載，在js中可以通過arguments這個參數(shù)來偽裝成函數(shù)重載，具體如下2014-10-10
webpack dll打包重復(fù)問題優(yōu)化的解決
在使用dll plugin過程中出現(xiàn)的一個包依賴問題，這個問題導(dǎo)致打出來的包會包含重復(fù)的代碼。這篇文章主要介紹了webpack dll打包重復(fù)問題優(yōu)化的解決，感興趣的小伙伴們可以參考一下2018-10-10