简单的 微信小程序 选项卡 tab 支持左右滑动

微信小程序 选项卡 tab 可左右滑动，可点击选择

小程序模板

<view class="box">
  <view class="topTabSwiper">
    <view wx:for="{{tabs}}" wx:key="tab_id" class="tab {{currentData == index ?'tabBorer':''}} " data-current="{{index}}" wx:item="item" bindtap="checkCurrent">{{item.tab_name}}</view>
  </view>
  <swiper current="{{currentData}}" class='swiper' duration="300" bindchange="bindchange">
    <swiper-item wx:for="{{list}}" wx:key="customer_mobile" wx:item="item">
    {{item.name}}
    </swiper-item>
  </swiper>
</view>

小程序css

.box{ width: 750rpx; display: block;}
.tab {
  width: 50%;
  display: block;
  height: 60rpx; line-height: 60rpx;
  text-align: center;
}

.topTabSwiper {width: 750rpx; display: flex; justify-content: space-between;
}
.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}
.tabBorer {
  border-bottom: 1px solid #f00;
  color: #f00;
} 
.swiper {
  width: 100%;
  height: calc(100vh - 70rpx) ;
} 
.swiper_con {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 80rpx 0;
}

小程序javascript

// pages/cstab/cstab.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentData : 0,
    tabs:[
      {tab_id:'1',tab_name:'导航1'},
      {tab_id:'2',tab_name:'导航2'},
      {tab_id:'3',tab_name:'导航3'},
    ],
    list:[
      {name:'我导航1对应的tab页'},
      {name:'我导航2对应的tab页'},
      {name:'我导航3对应的tab页'},
    ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  bindchange:function(e){
    const that  = this;
    that.setData({
      currentData: e.detail.current
    })
},
checkCurrent:function(e){

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})