<!--index.wxml--> <view class="swiper-tab" >   <view bindtap="swithNav" wx:for="{{tabCont}}" wx:key="item.index" class="swiper-tab-list {{currentTab==item.index?'active':''}}" data-current='{{item.index}}' >{{item.title}}</view> </view> <swiper class="swiper-box" current="{{currentTab}}" duration="300" style="height:400px" bindchange="GetCurrentTab" data-current='6' >   <swiper-item wx:for="{{tabCont}}" wx:key="item.index">    <image src='{{item.pic}}'></image>   <view>{{item.title}}</view>  </swiper-item> </swiper> 

/**index.wxss**//**index.wxss**/.swiper-tab { line-height: 80rpx; border: 1px solid #ccc; display: flex; justify-content: space-around; align-items: center;}.swiper-tab-list { font-size: 30rpx; color: #777; text-align: center;}.active { color: #da7c0c; border-bottom: 5rpx solid #da7c0c;}.swiper-box { display: block; height: 100%; width: 100%; overflow: hidden;}.swiper-box view { text-align: center;}image { width: 100%;}

Page({ /**  * 頁面的初始數據  */ data: {  currentTab:0,  tabCont: [{ "title": "tab1", "pic": "../../img/1.jpg", "index": "0" }, { "title": "tab2", "pic": "../../img/2.jpg", "index": "1" }, { "title": "tab3", "pic": "../../img/3.jpg", "index": "2" }, { "title": "tab4", "pic": "../../img/2.jpg", "index": "3" }, { "title": "tab5", "pic": "../../img/2.jpg", "index": "4" }, { "title": "tab6", "pic": "../../img/2.jpg", "index": "5" }, { "title": "tab7", "pic": "../../img/2.jpg", "index": "6" }, { "title": "tab8", "pic": "../../img/2.jpg", "index": "7" }, { "title": "tab9", "pic": "../../img/2.jpg", "index": "8" }], }, /**  * 生命周期函數--監聽頁面加載  */ onLoad: function (options) { }, /**  * 生命周期函數--監聽頁面初次渲染完成  */ onReady: function () { }, /**  * 生命周期函數--監聽頁面顯示  */ onShow: function () { }, /**  * 生命周期函數--監聽頁面隱藏  */ onHide: function () { }, /**  * 生命周期函數--監聽頁面卸載  */ onUnload: function () { }, /**  * 頁面相關事件處理函數--監聽用戶下拉動作  */ onPullDownRefresh: function () { }, /**  * 頁面上拉觸底事件的處理函數  */ onReachBottom: function () { }, /**  * 用戶點擊右上角分享  */ onShareAppMessage: function () { }, // swiper滑動時觸發bindchange事件，獲取事件對象e獲取當前所在滑塊的 index，并將其更新至data的currentTab中，視圖渲染通過判斷currentTab的讓對應的tab hover。 GetCurrentTab:function(e){  console.log(e.detail.current);  var that = this;  this.setData({   currentTab:e.detail.current  });  // console.log("11111"+this.data.currentTab); }, swithNav:function(e){  var that = this;  that.setData({   currentTab:e.target.dataset.current  }); }})