小程序选项卡tab切换

1.wxml

<view class='tab flex flexSa alignC'>
  <view class='tab_li  {{currentData == 0 ? "tab_on" : ""}}' data-current="0" bindtap='changeTab'>
    <view>1tab1</view>
    <view class='tab_li_line'></view>
  </view>
  <view class='tab_line'></view>
  <view class='tab_li {{currentData == 1 ? "tab_on" : ""}}' data-current="1" bindtap='changeTab'>
    <view>2tab2</view>
    <view class='tab_li_line'></view>
  </view>
</view>
<view hidden='{{currentData != 0}}' class='t_c'>1tab1's baby</view>
<view hidden='{{currentData != 1}}' class='t_c'>2tab2's baby</view>

2.wxss

.tab {
  width: 670rpx;
  margin: 40rpx auto 0;
  font-size: 44rpx;
  color: #222;
  text-align: center;
}

.flexSa {
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
}

.alignC {
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.tab_on {
  color: #ff8a00;
}

.tab_li {
  width: 334rpx;
}

.tab_on .tab_li_line {
  border-radius: 8rpx;
  -webkit-border-radius: 8rpx;
  -moz-border-radius: 8rxp;
  background-color: #ff8a00;
}

.tab_li_line {
  width: 40rpx;
  height: 8rpx;
  margin: 10rpx auto 0;
}

.tab_line {
  width: 2rpx;
  height: 37rpx;
  background-color: #e5e5e5;
}

.t_c {
  text-align: center;
}

3.js

// 3/3.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentData: 0
  },
  // tab切换
  changeTab: function(e) {
    const that = this;
    console.log(e.currentTarget.dataset.current);
    that.setData({
      currentData: e.currentTarget.dataset.current
    })
  }
})

4.效果