微信小程序中选项卡的示例分析(微信小程序,移动开发)

微信小程序 选项卡的简单实例

看下效果

代码：

home.wxml

<!--pages/home/home.wxml--><viewclass="swiper-tab"><viewclass="swiper-tab-item{{currentTab==0?'on':''}}"data-current="0"bindtap="swichNav">热门</view><viewclass="swiper-tab-item{{currentTab==1?'on':''}}"data-current="1"bindtap="swichNav">关注</view><viewclass="swiper-tab-item{{currentTab==2?'on':''}}"data-current="2"bindtap="swichNav">好友</view></view><swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:{{winHeight-80}}px"bindchange="bindChange"><swiper-item><view>热门</view></swiper-item><swiper-item><view>关注</view></swiper-item><swiper-item><view>好友</view></swiper-item></swiper>

home.wxss

/*pages/home/home.wxss*/.swiper-tab{width:100%;border-bottom:2rpxsolid#eeeeee;text-align:center;line-height:80rpx;}.swiper-tab-item{font-size:30rpx;display:inline-block;width:33.33%;color:#666666;}.on{color:#f10b2e;border-bottom:5rpxsolid#f10b2e;}.swiper-box{display:block;height:100%;width:100%;overflow:hidden;}.swiper-boxview{text-align:center;}

home.js

//pages/home/home.jsvarapp=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});}});},bindChange:function(e){varthat=this;that.setData({currentTab:e.detail.current});},swichNav:function(e){varthat=this;if(this.data.currentTab===e.target.dataset.current){returnfalse;}else{that.setData({currentTab:e.target.dataset.current})}}})