小程序tab切换

wxml

<view class="swiper-tab">
	<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">tab一</view>
	<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">tab二</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
	
	<swiper-item>
		<view>111</view>
	</swiper-item>

	<swiper-item>
		<view>222</view>
	</swiper-item>
	
</swiper>

wxss

.swiper-tab {
  width: 100%;
  border-bottom: 1rpx solid #f2f2f2;
  text-align: center;
  line-height: 100rpx;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0px 5px 8px 0px rgba(75, 127, 205, 0.12);
}

.swiper-tab-list {
  width: 50%;
  font-size: 36rpx;
  display: inline-block;
  color: #777777;
}

.on {
  color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin-top: 140rpx;
}

.swiper-box view {
  text-align: center;
}

js

data: {
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,
  },
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });
  },
  bindChange: function (e) {
    this.setData({
      currentTab: e.detail.current
    });

  },
  swichNav: function (e) {
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  },