自學小程式時看到京東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

使用方法:建立一個程式碼片段專案,匯入程式碼片段連結就好 使用時直接複製到自己的專案中