微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.
总算做出来了.分享出来看看.
先看效果:
再上代码:
1.index.wxml
[html] view plain copy <!--index.wxml--> <viewclass="swiper-tab"> <viewclass="swiper-tab-list{{currentTab==0?'on':''}}"data-current="0"bindtap="swichNav">哈哈</view> <viewclass="swiper-tab-list{{currentTab==1?'on':''}}"data-current="1"bindtap="swichNav">呵呵</view> <viewclass="swiper-tab-list{{currentTab==2?'on':''}}"data-current="2"bindtap="swichNav">嘿嘿</view> </view> <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:{{winHeight-31}}px"bindchange="bindChange"> <!--我是哈哈--> <swiper-item> <view>我是哈哈</view> </swiper-item> <!--我是呵呵--> <swiper-item> <view>我是呵呵</view> </swiper-item> <!--我是嘿嘿--> <swiper-item> <view>我是嘿嘿</view> </swiper-item> </swiper> 2.index.wxss [css] view plain copy /**index.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; }
3.index.js [javascript] view plain copy //index.js //获取应用实例 varapp=getApp() 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 }) } } })
之前没有上传代码.这是下图的代码
demo下载地址
这样一个类似viewpage的顶部选项卡就出来了.
如果觉得《微信小程序---tab切换》对你有帮助，请点赞、收藏，并留下你的观点哦！
