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