做過 android 的都(dou)知道在 android 里面實(shi)現 Tab切換(huan) 非常簡單，使用 android 提供的 TabLayout+ViewPager 很容(rong)器就實(shi)現了(le) Tab切換(huan) 的效果(guo)。

但是(shi)(shi)小程序中(zhong)是(shi)(shi)沒有提(ti)供(gong)類(lei)似(si)可(ke)以直接使用(yong)的組(zu)件，因此想要實現此功能需要我們自己去編碼實現。在(zai)上一篇文(wen)章中(zhong)我提(ti)到的小程序練手項目就(jiu)實現了 Tab切換 效(xiao)果，具體效(xiao)果圖可(ke)以參(can)考文(wen)章微(wei)信小程序入門項目。

實現思路

翻看小程序(xu)的(de)(de)文檔可以(yi)(yi)發現(xian)(xian)(xian)，微(wei)信為(wei)我(wo)們提供了一(yi)(yi)個(ge) swiper 組(zu)件(jian)(jian)，通過該(gai)(gai)組(zu)件(jian)(jian)可以(yi)(yi)實現(xian)(xian)(xian) view 的(de)(de)滑動切(qie)換，它的(de)(de)功能與 android 中的(de)(de) ViewPager 是類似(si)的(de)(de)。因此實現(xian)(xian)(xian) Tab切(qie)換 現(xian)(xian)(xian)在只需要實現(xian)(xian)(xian)頭部的(de)(de) Tabbar 即可，對(dui)于該(gai)(gai)功能我(wo)們可以(yi)(yi)采用多(duo)個(ge)橫向(xiang)排列(lie)的(de)(de) view 組(zu)件(jian)(jian)構成一(yi)(yi)個(ge) Tabbar ，每個(ge) view 組(zu)件(jian)(jian)作為(wei)一(yi)(yi)個(ge) Tab 項(xiang)，然后再將其(qi)點(dian)擊(ji)(ji)事件(jian)(jian)與 swiper 進行關聯(lian)即可實現(xian)(xian)(xian) Tab的(de)(de)點(dian)擊(ji)(ji)和滑動切(qie)換功能。而對(dui)于 Tabbar 的(de)(de)當前 Tab 項(xiang)下(xia)面的(de)(de)指示器我(wo)們可以(yi)(yi)采用 border-bottom 樣式(shi)實現(xian)(xian)(xian)，也可以(yi)(yi)單獨使(shi)用一(yi)(yi)個(ge) view 組(zu)件(jian)(jian)作為(wei)指示器，我(wo)這里采用的(de)(de)是第二種方式(shi)實現(xian)(xian)(xian)指示器。

代碼

實(shi)現(xian)代碼如(ru)下(xia)：

頁面布局代碼

<viewclass="page">
  <viewclass="navbar">
      <blockwx:for="{{tabs}}"wx:key="*this">
          <viewid="{{index}}"class="navbar__item {{activeIndex == index ? 'navbar__item_on' : ''}}"bindtap="navTabClick">
            <viewclass="navbar__title">{{item.name}}</view>
          </view>
      </block>
      <viewclass="navbar__slider"style="width: {{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
  </view>
  <viewstyle="position: absolute;top: 68rpx;width: 100%;height:{{contentHeight}}px">
    <swipercurrent="{{activeIndex}}"duration="300"bindchange="bindChange">
      <swiper-item>
        <view>熱門視頻</view>
      </swiper-item>
      <swiper-item>
        <view>比賽集錦</view>
      </swiper-item>
      <swiper-item>
        <view>你懂專欄</view>
      </swiper-item>
      <swiper-item>
        <view>天下足球</view>
      </swiper-item>
    </swiper> 
  </view>
</view>

布局樣式代碼

view , page {
  padding: 0px;
  margin: 0px;
}

.page {
  height: 100%;
}

.navbar {
    display: flex;
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
}

.navbar__item {
    position: relative;
    display: block;
    flex: 1;
    padding: 10rpx 0;
    text-align: center;
    font-size: 0;
    height: 48rpx;
    line-height: 48rpx;
    <!-- NavBar的總高度為：height + padding-top + padding-bottom = 68rpx -->
}

.navbar__item_on {
    color: #16B13A;
}

.navbar__slider {
    position: absolute;
    display: block;
    content: " ";
    left: 0;
    bottom: 0;
    height: 3px;
    background-color: #16B13A;
    transition: transform .3s;
}

.navbar__title{
    display: inline-block;
    font-size: 15px;
    max-width: 8em;
    text-align: center;
}

swiper {
  height: 100%;
}

swiper-item{
  width: 100%;
  padding-top: 20rpx;
  text-align: center;
}

js代碼

var tabs = [
  {
    name: "熱門視頻"
  },
  {
    name: "比賽集錦"
  },
  {
    name: "你懂專欄"
  },
  {
    name: "天下足球"
  }
];

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tabs: tabs,     //展示的數據
    slideOffset: 0,//指示器每次移動的距離
    activeIndex: 0,//當前展示的Tab項索引
    sliderWidth: 96,//指示器的寬度,計算得到
    contentHeight: 0//頁面除去頭部Tabbar后，內容區的總高度，計算得到
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options){
    var that = this;
    wx.getSystemInfo({
      success: function(res){
        that.setData({
        //計算相關寬度
          sliderWidth: res.windowWidth / that.data.tabs.length,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex,
          contentHeight: res.windowHeight - res.windowWidth / 750 * 68//計算內容區高度，rpx -> px計算
        });
      }
    });
  },

  bindChange: function(e){
    var current = e.detail.current;
    this.setData({
      activeIndex: current,
      sliderOffset: this.data.sliderWidth * current
    });
    console.log("bindChange:" + current);
  },

  navTabClick: function(e){
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
    console.log("navTabClick:" + e.currentTarget.id);
  }
})

總結

上面(mian)的(de)布(bu)局代碼(ma)和js代碼(ma)其實寫起(qi)來(lai)(lai)都不(bu)難，關鍵在于css樣式的(de)編寫，對于不(bu)熟悉CSS的(de)人來(lai)(lai)說調(diao)樣式太痛苦了(le)。這個(ge)效果也是我調(diao)了(le)好半天，參考(kao)了(le)好多(duo)代碼(ma)之(zhi)后(hou)寫出來(lai)(lai)的(de)，真o(╯□╰)o，看(kan)來(lai)(lai)想寫好小程序還得好好學(xue)學(xue)CSS樣式。