效果图，既可以点击切换，又可以滑动切换

。页面结构

！-页面/细节/细节。wxml-view class=' swiper-tab ' view class=' swiper-tab-item { { CurrentTab==0 '？活动' :''}} '数据-当前='0' bindtap='clickTab '全部/view view class=' swiper-tab-item { { CurrentTab==1 '？活动' :''}} '数据-当前='1' bindtap='clickTab '提现中/view view class=' swiper-tab-item { { CurrentTab==2 '？活动' :''}} '数据-当前='2' bindtap='clickTab '已提现/view/view swiper current=' { { CurrentTab } } ' duration=' 300 ' bind change=' Swipertab ' swiper-item视图全部/view/swiper-item swiper-item视图提现中/view/swiper-item swiper-item视图已提现/view/swiper-item/swiper.wxss

/* pages/detail/detail.wxss */.swiper-tab { width : 100%；边框-底部： 2rpx实心# ccc文本对齐：中心；高度： 88rpx线高： 88rpxdisplay: flexflex-flow :行；正义-内容：空格；}.swiper-tab-item { width : 30%；color: # 434343}。活动{ color : # f65959 border-bottom : 4rpx实心# F65959 } swiper { text-align : center；}.射流研究…

//页面/细节/细节。jsvar app=GetApp()Page({ data : { current ttab : 0 }，onLoad:函数（选项){ //页面初始化选择为页面跳转所带来的参数}, //滑动切换swipertapb :函数{ var=this那个。setdata({当前ttab : e . detail。当前})；}, //点击切换点击表：函数{ var=this如果(这个。数据。当前选项卡===e . target。数据集。当前){ return false}否则{那。setdata({当前选项卡： e . target。数据集。当前})} })以上所述是小编给大家介绍的微信小程序的标签选项卡的实现效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！