小程序tab标签滑动切换页面

index.wxml

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">已完成</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">未完成</view>
</view> 
 
 <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
  <swiper-item>已完成相关信息</swiper-item>
  <swiper-item>未完成相关信息</swiper-item>
</swiper>

index.js

Page({
  data: {
    currentTab: 0,
  },
  onLoad: function (options) {
    /** 
    * 获取系统信息 
    */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
  bindChange: function (e) {
    this.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
      })
    }
  },
})

index.wxss

.swiper-tab-list{
  margin-right: 15px;
}
.swiper-tab{ 
  width: 100%; 
  text-align: center; 
  line-height: 80rpx; 
  border-bottom: 1px solid #000; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
 } 
 .tab-item{ 
  flex: 1; 
  font-size: 30rpx; 
  display: inline-block;  
  color: #777777; 
 } 
 .on{ 
  color: red; 
  border-bottom: 5rpx solid red; 
 } 
 .swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } 
 .swiper view{ 
  text-align: center; 
  padding-top: 100rpx; 
 }

来源：https://www.freesion.com/article/3792114922/