美文网首页
微信小程序:scroll-view安卓机隐藏横向滚动条

微信小程序:scroll-view安卓机隐藏横向滚动条

作者: 韩发发吖 | 来源:发表于2020-02-29 15:28 被阅读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;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序:scroll-view安卓机隐藏横向滚动条

          本文链接:https://www.haomeiwen.com/subject/mriphhtx.html