微信小程序視圖層莫名出現(xiàn)豎線的解決方法
更新時間：2023年07月10日 08:30:05 作者：Morris_
本文主要介紹了微信小程序視圖層莫名出現(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;
}真機調試也找不到 “豎線” 的元素，但是顯示其就是 section 上的一部分。那看來這豎線應該不是自己添加了，如果是自己添加的，在真機調試的時候元素肯定是能找到的。
在界面上點擊，將鼠標放置在豎線上的時候，才發(fā)現(xiàn)，這原來是一個滾動條…用鼠標還可以上下滾動…
是什么原因這里盡然多了一個進度條呢，分析了一下，原因是子text在父view上范圍有超出，使用 overflow: hidden 設置父view的css。
overflow: hidden; 是一種CSS屬性，用于控制元素溢出內容的顯示方式。
具體作用如下：
- 當應用于父容器時，它可以隱藏超過容器邊界的子元素內容。
- 當應用于文本容器時，可以省略文字溢出的部分，并將其隱藏起來。
- 它還可以阻止?jié)L動條的顯示，使內容不能通過滾動來查看。
使用 overflow: hidden; 可以簡單而有效地控制元素內部內容的可見性和溢出行為，給頁面布局和視覺效果帶來更多自定義選項。
給 section 添加 overflow: hidden 屬性設置，解決了這個問題
.section {
flex: 1;
display: flex;
align-items: flex-end;
overflow: hidden;
}實現(xiàn)效果如下：
到此這篇關于微信小程序視圖層莫名出現(xiàn)豎線的解決方法的文章就介紹到這了,更多相關微信小程序視圖層豎線內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文將介紹js彈出的對話窗口永遠保持居中顯示實現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了JS vs TS二分法博弈對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
JavaScript中Math對象和隨機數(shù)的實際應用及注意事項
這篇文章主要介紹了JavaScript中Math對象和隨機數(shù)的實際應用及注意事項,包括數(shù)值處理、極值與運算、三角函數(shù)、對數(shù)與指數(shù)、常量、隨機數(shù)生成及其應用場景和注意事項,需要的朋友可以參考下2025-05-05
微信小程序導航欄滑動定位功能示例(實現(xiàn)CSS3的positionsticky效果)
這篇文章主要介紹了微信小程序導航欄滑動定位功能,可實現(xiàn)CSS3的positionsticky效果,涉及微信小程序事件監(jiān)聽、狀態(tài)判斷及屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
需正確使用new和spring，注意兩者的區(qū)別2009-03-03
這篇文章主要介紹了詳解微信小程序之提高應用速度小技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
JavaScript中實現(xiàn)跨標簽頁通信的方法詳解
跨標簽頁通信是指在瀏覽器中的不同標簽頁之間進行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家介紹了一下常見的跨標簽頁通信方式,感興趣的小伙伴可以了解下2023-11-11
在JavaScript中進行錯誤處理,最常見的方式就是使用try catch語句,下面這篇文章主要給大家介紹了關于JavaScript錯誤處理的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
javascript中通過arguments參數(shù)偽裝方法重載
面向對象的高級語言中，都有方法的重載，在js中可以通過arguments這個參數(shù)來偽裝成函數(shù)重載，具體如下2014-10-10
在使用dll plugin過程中出現(xiàn)的一個包依賴問題，這個問題導致打出來的包會包含重復的代碼。這篇文章主要介紹了webpack dll打包重復問題優(yōu)化的解決，感興趣的小伙伴們可以參考一下2018-10-10