微信小程序視圖層莫名出現(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;
}真機調(diào)試也找不到 “豎線” 的元素，但是顯示其就是 section 上的一部分。那看來這豎線應該不是自己添加了，如果是自己添加的，在真機調(diào)試的時候元素肯定是能找到的。
在界面上點擊，將鼠標放置在豎線上的時候，才發(fā)現(xiàn)，這原來是一個滾動條…用鼠標還可以上下滾動…
是什么原因這里盡然多了一個進度條呢，分析了一下，原因是子text在父view上范圍有超出，使用 overflow: hidden 設置父view的css。
overflow: hidden; 是一種CSS屬性，用于控制元素溢出內(nèi)容的顯示方式。
具體作用如下：
- 當應用于父容器時，它可以隱藏超過容器邊界的子元素內(nèi)容。
- 當應用于文本容器時，可以省略文字溢出的部分，并將其隱藏起來。
- 它還可以阻止?jié)L動條的顯示，使內(nèi)容不能通過滾動來查看。
使用 overflow: hidden; 可以簡單而有效地控制元素內(nèi)部內(nèi)容的可見性和溢出行為，給頁面布局和視覺效果帶來更多自定義選項。
給 section 添加 overflow: hidden 屬性設置，解決了這個問題
.section {
flex: 1;
display: flex;
align-items: flex-end;
overflow: hidden;
}實現(xiàn)效果如下：
到此這篇關于微信小程序視圖層莫名出現(xiàn)豎線的解決方法的文章就介紹到這了,更多相關微信小程序視圖層豎線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了javascript獲取web應用根目錄的方法,需要的朋友可以參考下2014-02-02
本文主要對小程序的優(yōu)缺點和DeviceOne的特點進行介紹，分享了使用DeviceOne實現(xiàn)微信小程序功能的實例代碼，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
alova.js 是一個基于 Promise 的輕量級 HTTP 請求庫,它提供了簡單而強大的 API 來處理前端的 HTTP 請求,它的設計目標是簡化開發(fā)者在前端進行 HTTP 請求的過程,提供更好的開發(fā)體驗和更高的效率,本文給大家詳細介紹了Alova.js現(xiàn)代化請求庫的使用,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JavaScript瀏覽器方向的優(yōu)化，文章圍繞主題展開詳細的內(nèi)容介紹具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
js借助ActiveXObject實現(xiàn)創(chuàng)建文件
創(chuàng)建文件的方法有很多，在本文為大家詳細介紹下js中時如何實現(xiàn)的，感興趣的朋友不要錯過了2013-09-09
這篇文章主要為大家詳細介紹了js截取字符串功能的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了詳解?Map?和?WeakMap?區(qū)別以及使用場景,Map本質(zhì)上是一個鍵值對的集合,WeakMap?只能將對象作為鍵名,下面來一起倆姐更多詳細內(nèi)容吧，希望這一篇文章能讓你對?Map?有更好的理解，或者能夠幫你理解?Map?和?WeakMap2022-01-01
這篇文章主要介紹了JS前端解壓zip的方法和技巧,業(yè)務中有時候需要獲取某個 zip 壓縮包內(nèi)的文件內(nèi)容展示到前端,在 zip 包體積不是那么大的時候并且不涉及壓縮包解密的時候,可以考慮純前端方案,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)tab切換的四種方法，并且對每個方法進行了評價，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了javascript 原型與原型鏈的理解,結合實例形式分析了javascript 原型與原型鏈的原理、使用方法及相關操作注意事項,需要的朋友可以參考下2019-11-11