这篇文章主要介绍了微信小程序怎么自定义可滑动的tab切换的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序怎么自定义可滑动的tab切换文章都会有所收获，下面我们一起来看看吧。
自定义tab切换（可滑动）
<!--components/warn/warn.wxml--><view class="menu"> <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?'font-white':'font-black'}}" data-pageid="{{index}}">{{item}}</navigator> <!-- <view class="order-desc">按排名升序</view> --></view><swiper current='{{page}}' bindchange="changepage"> <swiper-item wx:for="{{shouye}}" wx:key="index"> <view class="view1"> <view class="table"> <view class="tr"> <view class="th">产品编号</view> <view class="th">当前库存</view> <view class="th">按时间倒序</view> </view> <block wx:for="{{saleData}}" wx:key="index"> <view class="tr bg-f3f4f4"> <view class="td">{{item.prodCode}}</view> <view class="td">{{item.proName}}</view> <view class="td">{{item.time}}</view> </view> </block> <view class="all-tabledata">查看全部</view> </view> </view> </swiper-item></swiper>// components/warn/warn.jsComponent({ properties: { }, data: { shouye: ['未处理', '已处理'], page: 0, saleData:[ { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' }, { prodCode:38749237093280, proName:'1000', time:'2021-12-12 14:00' } ] }, methods: { change: function (event) { var a = event.currentTarget.dataset.pageid this.setData({ page: a }) }, changepage: function (event) { console.log(event) var a = event.detail.current this.setData({ page: a }) }, }})scroll-view{ width: 100%; height: 100%; display: flex; } .menu{ width: 100%; height: 10%; background: white; display: flex; align-items: center; justify-content: space-around; } .font-white{ display: flex; flex-direction: column; align-items: center; color: #FFFFFF; background: #197FF0; font-size: 16px; font-family: PingFang SC; font-weight: 400; width: 200rpx; height: 60rpx; line-height: 60rpx; opacity: 1; border-radius: 34rpx; } .font-black{ display: flex; flex-direction: column; align-items: center; font-size: 16px; font-family: PingFang SC; font-weight: 400; color: #041320; width: 200rpx; height: 60rpx; line-height: 60rpx; background: #F6F6F6; opacity: 1; border-radius: 34rpx; } .view1{ height: 100%; overflow-y: auto; } swiper { height: 90%; overflow-y: auto; } .tr{ width: 100%; display: flex; }.bg-f3f4f4{ margin-bottom: 20rpx; background:rgba(28, 41, 53,0.05)}.tr>.th:nth-child(1),.tr>.td:nth-child(1){ width: 40%; text-align: center;}.tr>.th:nth-child(2),.tr>.td:nth-child(2){ width: 20%; text-align: center;}.tr>.th:nth-child(3),.tr>.td:nth-child(3){ width: 40%; text-align: center;}.th,.td{ font-size: 28rpx; font-family: PingFang SC; font-weight: 400; line-height:80rpx; color: #041320;}.all-tabledata{ font-size: 24rpx; font-family: PingFang SC; font-weight: 400; height: 40rpx; line-height:30rpx; color: #187EEF; text-align: center; margin: 40rpx 0;}关于“微信小程序怎么自定义可滑动的tab切换”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序怎么自定义可滑动的tab切换”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
