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

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

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

界面：

<view>点击下方文字切换</view><scroll-view scroll-x style="height:70rpx;width:750rpx;overflow:scroll;" scroll-left="{{scroll_left}}">  <view style="width:{{tab_tite_data.length*t_width}}rpx;">    <view wx:for="{{tab_tite_data}}" style="height:100rpx;width:{{t_width}}rpx;margin-bottom:10rpx;display:inline-block;">      <view bindtap='changeview' style="width:100%;height:60rpx;text-align:center;font-size:30rpx;line-height:60rpx;background:{{item.color}};color:#ffffff;display:inline-block;" data-current="{{index}}">{{item.name}}</view>      <view style="display:{{c_index==index?'block':'none'}}; width:{{t_width/3}}rpx;text-align:center;margin-left:{{t_width/3}}rpx;background:#000000;height:2rpx;"></view>    </view>  </view></scroll-view><swiper bindchange='get_index' current="{{c_index}}">  <swiper-item wx:for="{{tab_tite_data}}" style="width:750rpx;height:150rpx;">    <view style="background:{{item.color}};height:150px;">{{item.name}}</view>  </swiper-item></swiper>

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);      },    })  }})

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