前阵子。一个同事说在实现选项卡的时候,使用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);
},
})
}
})
就这两个界面。直接复制粘贴就可以看到效果了