小程序顶部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
})
}
},

})

第一次写，请多多见谅