微信小程序实现选项卡效果
本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下
demo.wxss
.swiper-tab{ width:100%; border-bottom:2rpxsolid#777777; text-align:center; line-height:80rpx;} .swiper-tab-list{font-size:30rpx; display:inline-block; width:33.33%; color:#777777; } .on{color:#da7c0c; border-bottom:5rpxsolid#da7c0c;} .swiper-box{display:block;height:100%;width:100%;overflow:hidden;} .swiper-boxview{ text-align:center; }
demo.wxml
哈哈 呵呵 嘿嘿 我是哈哈 我是呵呵 我是嘿嘿
demo.js
Page({ data:{ /** *页面配置 */ winWidth:0, winHeight:0, //tab切换 currentTab:0, }, onLoad:function(){ varthat=this; /** *获取系统信息 */ wx.getSystemInfo({ success:function(res){ that.setData({ winWidth:res.windowWidth, winHeight:res.windowHeight }); } }); }, /** *滑动切换tab */ bindChange:function(e){ varthat=this; that.setData({currentTab:e.detail.current}); }, /** *点击tab切换 */ swichNav:function(e){ varthat=this; if(this.data.currentTab===e.target.dataset.current){ returnfalse; }else{ that.setData({ currentTab:e.target.dataset.current }) } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。