微信小程序选项卡功能的开发

<!--swipertab.wxml--><view>      <view>tab一</view>      <view>tab二</view>      <view>tab三</view>  </view>  <swiper>      <!-- tab一 -->      <swiper-item>        <view>tab一</view>      </swiper-item>      <!-- tab二 -->      <swiper-item>        <view>tab二</view>      </swiper-item>      <!-- tab三 -->      <swiper-item>        <view>tab三</view>      </swiper-item>  </swiper>

//获取应用实例  var app = getApp()Page({data: {	/** 	 * 页面配置	 */	winWidth: 0,	winHeight: 0,	// tab切换  	currentTab: 0,},onLoad: function() {	var that = this;	/** 	 * 获取系统信息	 */	wx.getSystemInfo({		success: function(res) {			that.setData({winWidth: res.windowWidth,winHeight: res.windowHeight			});		}	});},/**  * 滑动切换tab */bindChange: function(e) {	var that = this;	that.setData({		currentTab: e.detail.current	});},/**  * 点击tab切换 */swichNav: function(e) {	var that = this;	if (this.data.currentTab === e.target.dataset.current) {		return false;	} else {		that.setData({			currentTab: e.target.dataset.current		})	}}})

.swiper-tab{      width: 100%;      border-bottom: 2rpx solid #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: 5rpx solid #da7c0c;}    .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  .swiper-box view{      text-align: center;  }

{    "navigationBarTitleText": "选项卡页面切换"}