微信小程序实现tab组件

1、首先在wxml文件中：

<view class="main">
  <view>
    <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}}px" bindchange="bindChange">
    <swiper-item>
      你好
    </swiper-item>
    <swiper-item>
        <view>欢迎评价</view>
    </swiper-item>
</swiper>
</view>

2、js文件中：

/**
   * 页面的初始数据
   */
  data: {
  
    winWidth: 0,
    winHeight: 0,
    currentTab: 0,
  },
  swichNav: function( e ) {

    var that = this;

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

    var that = this;
    that.setData( { currentTab: e.detail.current });

},

  /**
   * 生命周期函数--监听页面加载 
   */
  onLoad: function (options) {
    console.log("options")
    var that = this;
    wx.getSystemInfo({

      success: function(res) {
          that.setData({
              winWidth: res.windowWidth,
              winHeight: res.windowHeight+50
          });
      }

  });
    var tokens = wx.getStorage({
      key: 'token',
    });
    that.setData({
      id: options.id,
      token: tokens
    })
    
  },

 3、wxss样式：

/* tab样式开始 */

.swiper-tab{
  height: 10vh;
  display: flex;
  line-height: 7vh;
  margin-bottom: 10px;
}
.swiper-tab-list{  
  font-size: 16px;
  display: inline-block;
  width: 50%;
  color: #777777;
  text-align: center;
  margin-bottom: 10px;
}
.on{ 
  color: blue;
  border-bottom: 3rpx solid blue;
  padding-bottom:1vh;
}

.swiper-box{ 
  display: block; 
  height: 80vh; 
  width: 100%; 
  overflow: scroll; 
}
.swiper-box view{
  text-align: center;
}
/* tab样式结束 */