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

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

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

直接上代码：

WXML：

1111
2222
3333
4444
5555
6666
7777
8888





11111



22222



33333


44444


55555


66666


77777


88888



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

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