快捷導(dǎo)航

小程序scroll-view安卓機(jī)隱藏橫向滾動(dòng)條的實(shí)現(xiàn)詳解

更新時(shí)間：2019年05月16日 15:38:45 作者：emcty

這篇文章主要介紹了小程序scroll-view安卓機(jī)隱藏橫向滾動(dòng)條的實(shí)現(xiàn)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、實(shí)踐踩坑

項(xiàng)目使用mpvue開(kāi)發(fā)

1.使用flex布局

// html大概長(zhǎng)這樣

<div class="worth-wraper">
 <scroll-view scroll-x="true" scroll-left="0">
 <div class="worth-list">
 <div class="worth-item-img">
 <img src="/static/images/index/brand1.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="/static/images/index/brand2.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="/static/images/index/brand3.png" alt="">
 </div>
 <div class="worth-item-img">
 <img src="/static/images/index/brand4.png" alt="">
 </div>
 </div>
 </scroll-view>
</div>

// css相應(yīng)就大概長(zhǎ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沒(méi)有問(wèn)題，樣式正常，然后到了安卓機(jī)上，卻出現(xiàn)了橫向滾動(dòng)條.......然后各種找如何去除橫向滾動(dòng)條的方法....

二、隱藏滾動(dòng)條

在網(wǎng)上搜了很多，都是說(shuō)加上這段代碼就可以：

/隱藏滾動(dòng)條/

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;
}

或者有的人說(shuō)這樣子：

/隱藏滾動(dòng)條/

::-webkit-scrollbar{

display: none;
}

然而兩種方法我都試過(guò)，然而在安卓機(jī)上并沒(méi)什么鳥(niǎo)用。

后來(lái)看到有人這么說(shuō)：

1.scroll-view 中的需要滑動(dòng)的元素不可以用 float 浮動(dòng)；

2.scroll-view 中的包裹需要滑動(dòng)的元素的大盒子用 display:flex; 是沒(méi)有作用的；

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

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

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

然后改寫(xiě)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; //加個(gè)padding值，這樣高度大于scroll-view外面包裹的元素
  .worth-item-img{
   margin-right: 20rpx;
   width: 290rpx;
   height: 560rpx;
   display: inline-block;
  }
 }
}

到這里，scroll-view安卓機(jī)上橫向滾動(dòng)條消失了，大概長(zhǎng)這樣：