真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

小程序如何實(shí)現(xiàn)scroll-view安卓機(jī)隱藏橫向滾動條-創(chuàng)新互聯(lián)

這篇文章主要介紹了小程序如何實(shí)現(xiàn)scroll-view安卓機(jī)隱藏橫向滾動條,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)察布查爾錫伯,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

一、實(shí)踐踩坑

項目使用mpvue開發(fā)

1.使用flex布局

// html大概長這樣


 
 
 
 
 
     
     
         
// css相應(yīng)就大概長這樣
.worth-wraper{

margin-top: 60rpx;
height: 560rpx;
box-sizing: border-box;
display: flex;
width: 750rpx;
overflow: hidden;
font-size: 28rpx;
color: #7a7269;
line-height: 42rpx;
.worth-list{
 display: flex;
 margin-left: 30rpx;
 .worth-item-img{
   flex: 1;
   margin-right: 20rpx;
   width: 290rpx;
   height: 560rpx;
 }
 img{
  width: 290rpx;
  height: 560rpx;
 }
 .worth-item{
  padding: 0 35rpx 0 40rpx;
  flex: 1;
  box-sizing: border-box;
  background: url("../../../static/images/index/worth-bg1.png") no-repeat;
  background-size: 100% 100%;
  width: 290rpx;
  height: 560rpx;
  margin-right: 20rpx;
 }
}
}

ios沒有問題,樣式正常,然后到了安卓機(jī)上,卻出現(xiàn)了橫向滾動條.......然后各種找如何去除橫向滾動條的方法....

二、隱藏滾動條

在網(wǎng)上搜了很多,都是說加上這段代碼就可以:

/隱藏滾動條/

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;
}

或者有的人說這樣子:

/隱藏滾動條/

::-webkit-scrollbar{

display: none;
}

然而兩種方法我都試過,然而在安卓機(jī)上并沒什么鳥用。

后來看到有人這么說:

1.scroll-view 中的需要滑動的元素不可以用 float 浮動;

2.scroll-view 中的包裹需要滑動的元素的大盒子用 display:flex; 是沒有作用的;

3.scroll-view 中的需要滑動的元素要用 dislay:inline-block; 進(jìn)行元素的橫向編排;

4.包裹 scroll-view 的大盒子有明確的寬和加上樣式--> overflow:hidden;white-space:nowrap;

好像能行得通....不用flex,不用float

然后改寫css代碼

.worth-wraper{

 margin-top: 60rpx;
 width: 750rpx;
 height: 560rpx;
 overflow: hidden; 
 scroll-view{
  width: 100%;
  white-space: nowrap;
 }
 .worth-list{
  display: inline-block;
  margin-left: 30rpx;
  padding-bottom: 60rpx; //加個padding值,這樣高度大于scroll-view外面包裹的元素
  .worth-item-img{
   margin-right: 20rpx;
   width: 290rpx;
   height: 560rpx;
   display: inline-block;
  }
 }
}

到這里,scroll-view安卓機(jī)上橫向滾動條消失了,大概長這樣:

小程序如何實(shí)現(xiàn)scroll-view安卓機(jī)隱藏橫向滾動條

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“小程序如何實(shí)現(xiàn)scroll-view安卓機(jī)隱藏橫向滾動條”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!


本文名稱:小程序如何實(shí)現(xiàn)scroll-view安卓機(jī)隱藏橫向滾動條-創(chuàng)新互聯(lián)
標(biāo)題路徑:http://weahome.cn/article/dhhcec.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部