小程序横向滚动tab

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kai_1215/article/details/79094515

效果图：

要点介绍：

1，scroll-view 设置为横向滑动scroll-x=”true”

<scroll-view scroll-x="true" class="ip_tab_comtainer">
  <view class="ip_tab_comtainer_padd"></view>
  <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
    <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">
      {{ip.title}}
    </view>
  </block>
  <view class="ip_tab_comtainer_padd"></view>
</scroll-view>

2，scroll-view的css要设置为 white-space: nowrap;

.ip_tab_comtainer {
    width: 100%;
    background-color: #F5F5F5;
    padding: 20rpx 0 0;
    white-space: nowrap;
}

不要用 display: flex;,这样可能存在兼容问题，在android手机上可能滑动不了

.ip_tab_comtainer {
    width: 100%;
    background-color: #F5F5F5;
    padding: 20rpx 0 0;
    white-space: nowrap;
    display: flex;
}

3，scroll-view的子节点的css要设置为 display: inline-block;不然可能显示有问题

.ip_tab_item_s {
    display: inline-block;
    line-height: 40rpx;
    padding: 12rpx 32rpx;
    color: #ED373D;
    margin-right: 8rpx;
    margin-left: 8rpx;
    font-size: 28rpx;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #ffffff;
    border-radius: 4rpx;
    border: 1px solid #ED373D;
}

4，如果要禁用横向滚动条的显示需要在page界面的样式布局里面加上,不要在组件或者模块的样式布局里面加

/**
去除横向滚动条
*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

深入说明我就不说了，大家自己看源码吧：

git地址：https://github.com/fuxingkai/frankui-weapp，走过路过给个star和fork一下，欢迎大家吐槽。