微信小程序利用swiper+scroll-view實(shí)現(xiàn)Tab切換

先放一張效果圖

圖一 效果展示

需要實(shí)現(xiàn)的功能邏輯：

1、當(dāng)用戶點(diǎn)擊tab的時(shí)候，tab樣式發(fā)生改變，并且下方對(duì)應(yīng)的展示內(nèi)容也發(fā)生改變。
2、當(dāng)用戶滑動(dòng)下方內(nèi)容時(shí)，會(huì)切換內(nèi)容，并且上方的tab也會(huì)根據(jù)對(duì)應(yīng)的展示內(nèi)容改變選中狀態(tài)

關(guān)鍵問(wèn)題：如何將tab和下方的內(nèi)容對(duì)應(yīng)起來(lái)？

思路：

設(shè)置一個(gè)currentIndex變量，tab的選中狀態(tài)以及展示的內(nèi)容都根據(jù)這一個(gè)變量來(lái)進(jìn)行切換。并且在用戶觸發(fā)點(diǎn)擊tab事件和滑動(dòng)內(nèi)容事件的時(shí)候，都會(huì)更新這個(gè)currentIndex的值。

tab部分的wxml：

<view class="nav_wrap">
  <scroll-view class="nav" scroll-x scroll-left="{{navScrollLeft}}">
    <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndex?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">
      {{item.text}}
    </view>
  </scroll-view>
</view>

tab部分的js：

 activeNav(e) {
    this.setData({
      currentIndex: e.currentTarget.dataset.index,
      navScrollLeft: e.detail.current >= 5 ? ((e.detail.current) * 80) : 0
    })
  },

1、這里tab選中狀態(tài)是根據(jù)currentIndex開(kāi)進(jìn)行判斷的，如果currentIndex等于當(dāng)前節(jié)點(diǎn)綁定的index,就給該節(jié)點(diǎn)加上選中時(shí)的class。
2、使用data-index="{{index}}"將index值綁定在該節(jié)點(diǎn)上，當(dāng)用戶點(diǎn)擊tab時(shí)會(huì)觸發(fā)activeNav事件。該事件會(huì)用e.currentTarget.dataset.index獲取該節(jié)點(diǎn)綁定的index的值，并將這個(gè)值賦給currentIndex。
3、因?yàn)槲疫@里的tab數(shù)量較多，所以還設(shè)置了一個(gè)navScrollLeft，用來(lái)自動(dòng)改變scroll-view的離左側(cè)的距離。這樣當(dāng)tab切換到第 6個(gè)以及6個(gè)之后的時(shí)候，可以從視覺(jué)角度上讓該tab展示在第一個(gè)tab的位置。

swiper部分的wxml：

<swiper style="height:{{clientHeight?clientHeight+'px':auto}}"  current="{{currentIndex}}"  bindchange="changeTab">
  <swiper-item>
    <view class="slide">
      <navigator>
        <swiper autoplay indicator-dots circular>
          <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
            <image src="{{item.imgSrc}}" mode='widthFix'></image>
          </swiper-item>
        </swiper>
      </navigator>
    </view>
    <view class="vedioWrap">
      <navigator url="../detail/detail?id={{item.id}}" class="vedioList" wx:for="{{vedioList}}" wx:key="index">
        <image src="{{item.imgSrc}}" mode="widthFix"></image>
        <view class="text">{{item.videoTitle}}</view>
      </navigator>
    </view>
  </swiper-item>
  <swiper-item wx:for="{{contentList}}" wx:key="{{index}}">
    {{item.text}}
  </swiper-item>
</swiper>

swiper部分的js：

  changeTab(e){
    this.setData({
      currentIndex: e.detail.current,
      navScrollLeft: e.detail.current>=5?((e.detail.current) * 80):0
    })
  },

1、swiper里展示的內(nèi)容通過(guò)設(shè)置current="{{currentIndex}}"屬性來(lái)根據(jù)currentIndex進(jìn)行改變。
2、當(dāng)用戶滑動(dòng)內(nèi)容時(shí)，設(shè)置 bindchange="changeTab"來(lái)觸發(fā)changeTab事件。該事件將當(dāng)前內(nèi)容的索引值賦給currentIndex。
3、這里的swiper的高度是通過(guò)計(jì)算獲取的。因?yàn)檫@里展示的內(nèi)容是通過(guò)后臺(tái)接口獲取并渲染出來(lái)的，所以不能給他一個(gè)固定值，又不能不給，因?yàn)閟wiper的默認(rèn)高度只有150px,所以大家一定要根據(jù)自己的情況去將這個(gè)值計(jì)算出來(lái)在切換tab的時(shí)候重新賦值。