做过 android 的都知道在 android 里面实现 Tab切换 非常简单，使用 android 提供的 TabLayout+ViewPager 很容器就实现了 Tab切换 的效果。

但是小程序中是没有提供类似可以直接使用的组件，因此想要实现此功能需要我们自己去编码实现。在上一篇文章中我提到的小程序练手项目就实现了 Tab切换 效果，具体效果图可以参考文章微信小程序入门项目。

实现思路

翻看小程序的文档可以发现，微信为我们提供了一个 swiper 组件，通过该组件可以实现 view 的滑动切换，它的功能与 android 中的 ViewPager 是类似的。因此实现 Tab切换 现在只需要实现头部的 Tabbar 即可，对于该功能我们可以采用多个横向排列的 view 组件构成一个 Tabbar ，每个 view 组件作为一个 Tab 项，然后再将其点击事件与 swiper 进行关联即可实现 Tab的点击和滑动切换功能。而对于 Tabbar 的当前 Tab 项下面的指示器我们可以采用 border-bottom 样式实现，也可以单独使用一个 view 组件作为指示器，我这里采用的是第二种方式实现指示器。

代码

实现代码如下：

页面布局代码

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

总结

上面的布局代码和js代码其实写起来都不难，关键在于css样式的编写，对于不熟悉CSS的人来说调样式太痛苦了。这个效果也是我调了好半天，参考了好多代码之后写出来的，真o(╯□╰)o，看来想写好小程序还得好好学学CSS样式。