小程序顶部tabbar，随着内容左右滑动tabbar进行联动

自学小程序时看到京东app上的效果，突发奇想做出来的。 如下图展示，左右滑动的时候顶部tabbar可以进行联动

参考了该文章，进行了改进http://blog.csdn.net/qq_31383345/article/details/52900835。

直接上代码：

WXML：

<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"data-current="0"bindtap="swichNav">1111</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}"data-current="1"bindtap="swichNav">2222</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}"data-current="2"bindtap="swichNav">3333</view>
<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}"data-current="3"bindtap="swichNav">4444</view>
<view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}"data-current="4 "bindtap="swichNav">5555</view>
<view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}"data-current="5"bindtap="swichNav">6666</view>
<view class="swiper-tab-list {{currentTab==6 ? 'on' : ''}}"data-current="5"bindtap="swichNav">7777</view>
<view class="swiper-tab-list {{currentTab==7 ? 'on' : ''}}"data-current="5"bindtap="swichNav">8888</view>
</view>
</scroll-view>
<swipercurrent="{{currentTab}} "class="swiper-box "duration="300 "style="height:{{winHeight - 31}}px "bindchange="bindChange">
<!-- 我是哈哈 -->
<swiper-item>
<view>11111</view>
</swiper-item>
<!-- 我是呵呵 -->
<swiper-item>
<view>22222</view>
</swiper-item>
<!-- 我是嘿嘿 -->
<swiper-item>
<view>33333</view>
</swiper-item>
<swiper-item>
<view>44444</view>
</swiper-item>
<swiper-item>
<view>55555</view>
</swiper-item>
<swiper-item>
<view>66666</view>
</swiper-item>
<swiper-item>
<view>77777</view>
</swiper-item>
<swiper-item>
<view>88888</view>
</swiper-item>
</swiper>

WXSS:
.swiper-tab{ 
text-align: center;
line-height: 80rpx;} 
.swiper-tab-list{ font-size: 30rpx;
display: inline-block;
width: 20%;
color: #777777;
} 
.on{ color:#da7c0c;
border-bottom: 5rpx solid#da7c0c;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper-box view{
text-align: center;
} 

JS:

//获取应用实例
var app = getApp()
Page({
data: {
// tabbar
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
scrollLeft: 0,
},
onLoad: function () {
var that = this;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
/**
* 滑动切换tab
*/
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
// 内容与tabbar的联动
//这里的 2 75 是根据顶部tabbar的个数来决定的，我定义的是5个，2是索引，也就是说超过三页才会改变
if (e.detail.current > 2) {
var a = e.detail.current
var query = wx.createSelectorQuery()
query.select('.scrollBox').boundingClientRect(function (res) {
var b = res.width
that.setData({
scrollLeft: (a - 2) * 75
})
})
query.selectViewport().scrollOffset()
query.exec(function (res) {
})
} else {
var a = e.detail.current
this.setData({
scrollLeft: 0
})
}

},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
console.log(e.target)
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},

})

第一次写，请多多见谅

最新编辑补充:

无奈由于小程序swiper组件问题,无法自适应内容高度,所以左右滑动只适用于内容很少的情况下,

如果获取的动态数据过多,只能使用点击切换,下面放上我写的代码片段进行使用:

wechatide://minicode/7nqNnEms6yYq

使用方法:创建一个代码片段项目,导入代码片段链接就好 使用时直接复制到自己的项目中