微信小程序:scroll-view安卓机隐藏横向滚动条
2020-02-29 本文已影响0人
韩发发吖
微信小程序使用scroll-view横向布局在iOS和Android上有不同的展示,iOS无滚动条,Android有滚动条,按照产品需求需要隐藏横向滚动条。
在网上搜索一些,说是以下几段代码可以实现,代码如下:
使用组件的伪类。亲测,在小程序端无效
/隐藏滚动条/
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
/隐藏滚动条/
::-webkit-scrollbar{
display: none;
}
试用了伪类失效,只能自己写css了,亲测,在小程序Android有效。包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;
代码如下:
<view class="scroll-box">
<scroll-view class="scroll-H" scroll-x="true" >
<view class="scroll-H-list">
<view class="scroll-H-item" wx:for="{{box_list}}" wx:key="index">
{{item.color}}
</view>
</view>
</scroll-view>
</view>
.scroll-box {
width: 750rpx;
height: 200rpx;
overflow: hidden;
font-size: 28rpx;
color: #EEEEEE;
line-height: 42rpx;
}
.scroll-H {
width: 100%;
white-space: nowrap;
}
.scroll-H-list {
padding-bottom: 60rpx;
}
.scroll-H-item {
display: inline-block;
width: 300rpx;
height: 200rpx;
}