微信小程序中tab之间的切换

微信小程序中tab之间的切换
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);
  }
})

wxml

<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>

wxss

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