效果圖：

<!--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
   });

  }
})