189 8069 5689

小程序如何实现scroll-view安卓机隐藏横向滚动条-创新互联

这篇文章主要介绍了小程序如何实现scroll-view安卓机隐藏横向滚动条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联主要从事网站建设、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务察布查尔锡伯,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

一、实践踩坑

项目使用mpvue开发

1.使用flex布局

// html大概长这样


 
 
 
 
 
     
     
         
// css相应就大概长这样
.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没有问题,样式正常,然后到了安卓机上,却出现了横向滚动条.......然后各种找如何去除横向滚动条的方法....

二、隐藏滚动条

在网上搜了很多,都是说加上这段代码就可以:

/隐藏滚动条/

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;
}

或者有的人说这样子:

/隐藏滚动条/

::-webkit-scrollbar{

display: none;
}

然而两种方法我都试过,然而在安卓机上并没什么鸟用。

后来看到有人这么说:

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

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

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;

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安卓机上横向滚动条消失了,大概长这样:

小程序如何实现scroll-view安卓机隐藏横向滚动条

感谢你能够认真阅读完这篇文章,希望小编分享的“小程序如何实现scroll-view安卓机隐藏横向滚动条”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章题目:小程序如何实现scroll-view安卓机隐藏横向滚动条-创新互联
文章来源:http://jkwzsj.com/article/dhhcec.html