宝哥软件园

微信小程序实现标签选项卡

编辑:宝哥软件园 来源:互联网 时间:2021-12-01

微信小程序实现tab选项卡(图1)

接下来直接查看源码:wxml

!-页面/细节/细节。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全部/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。数据集。当前})} })

更多资讯
游戏推荐
更多+