微信小程序实现顶部选项卡(swiper)

<!--pages/index/index.wxml--> <view class="swiper-tab">  <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">选项一</view>  <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">选项二</view>  <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">选项三</view> </view>  <swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">  <swiper-item>   <view>页面一</view>  </swiper-item>  <swiper-item>   <view>页面二</view>  </swiper-item>  <swiper-item>   <view>页面三</view>  </swiper-item> </swiper> 

/* pages/index/index.wxss */ .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; } 

// pages/index/index.js Page({   /**   * 页面的初始数据   */  data: {   winWidth:0,   winHeight:0,   currentTab:0  },   /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {   var that = this;    /**    * 获取系统信息    */   wx.getSystemInfo({     success: function (res) {     that.setData({      winWidth: res.windowWidth,      winHeight: res.windowHeight     });    }    });  },  bindChange: function (e) {    var that = this;   that.setData({ currentTab: e.detail.current });   },  swichNav: function (e) {    var that = this;    if (this.data.currentTab === e.target.dataset.current) {    return false;   } else {    that.setData({     currentTab: e.target.dataset.current    })   }  } ,  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {   },   /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {   },   /**   * 用户点击右上角分享   */  onShareAppMessage: function () {   } })