微信小程序之Tab切换

做过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组件作为指示器，我这里采用的是第二种方式实现指示器。

代码

实现代码如下：

页面布局代码

<view class="page">
  <view class="navbar">
      <block wx:for="{{tabs}}" wx:key="*this">
          <view id="{{index}}" class="navbar__item {{activeIndex == index ? 'navbar__item_on' : ''}}" bindtap="navTabClick">
            <view class="navbar__title">{{item.name}}</view>
          </view>
      </block>
      <view class="navbar__slider" style="width: {{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
  </view>
  <view style="position: absolute;top: 68rpx;width: 100%;height:{{contentHeight}}px">
    <swiper current="{{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样式。