微信小程序：使用swiper与scroll-view实现tab选项卡（2）

前阵子。一个同事说在实现选项卡的时候，使用swiper的话是无法实现三个以上的tab的，我听着有点懵，可能是他觉得我用控制自动滚动来实现有点问题，就从第三个页面滚动会第一个页面的是顺序是3》4》5》6》1》，而不是正常情况下的3》2》1，所以他觉得应该使用tab来实现。

我个人感觉有不同的方法是很好的，有思维的碰撞也是很棒的。但是有点不服气。所以就直接给了他另外一个demo，现在也上传上来：

界面：

点击下方文字切换

  
    
      {{item.name}}
      
    
  


  
    {{item.name}}
  

js：

Page({
  data: {
    c_index: 0,//当前
    s3_width: 0,
    t_width: 250,//上方每个tab的大小
    scroll_left: 0,//上方滚动的位置
    t_margin_left: 0,//上方的margin-left
    tab_tite_data: [
      { "name": "1", "color": "orange", }
      , { "name": "2", "color": "blue", }
      , { "name": "3", "color": "green", }
      , { "name": "4", "color": "yellow", }
      , { "name": "5", "color": "black", }
      , { "name": "6", "color": "pink", }
    ],
  },
  onShow: function () {
    this.getwidth();
  },
  //滑
  get_index: function (e) {
    var crash_current = e.detail.current;
    var s = 0;
    if (crash_current != 0 && crash_current != 1) {
      s = parseInt(crash_current - 1) * this.data.s3_width;
    }
    this.setData({
      c_index: e.detail.current,
      scroll_left: s
    });
  },
  //点
  changeview: function (e) {
    var crash_current = e.currentTarget.dataset.current;
    var s = 0;
    if (crash_current != 0 && crash_current != 1) {
      s = parseInt(crash_current - 1) * this.data.s3_width;
    }
    this.setData({
      c_index: e.currentTarget.dataset.current,
      scroll_left: s
    });
  },
  getwidth: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData(that.data.s3_width = res.windowWidth / 3);
      },
    })
  }
})

就这两个界面。直接复制粘贴就可以看到效果了