小程序横向滚动tab

Dear 丶 2022-06-01 03:06 279阅读 0赞

##### 效果图： #####

![1.gif][]

##### 要点介绍： #####

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][https_github.com_fuxingkai_frankui-weapp]，走过路过给个star和fork一下，欢迎大家吐槽。

[1.gif]: /images/20220601/aecc52e673ab46cb943829361a1d7193.png
[https_github.com_fuxingkai_frankui-weapp]: https://github.com/fuxingkai/frankui-weapp