微信小程序 --- 10行代碼實現滑動tab切換

效果預覽:

js部分：

Page({

  data: {
    arr: [1,2,3,4,5,6,7,8],
    index: 1
  },

  onLoad: function (options) {
    this.setData({
      childW: this.data.arr.length * 80
    });
  },

  tabOn: function (e) {
    this.setData({
      index: e.currentTarget.dataset.index + 1
    });
  }

})

wxtml部分：

<scroll-view scroll-x scroll-with-animation='true'>
  <view style='width: {{ childW }}px'>
    <block wx:for='{{ arr }}'>
      <view class='tab' catchtap='tabOn' data-index='{{ index }}'>{{ item }}</view>
    </block>
  </view>
</scroll-view>

<view class='content' wx:if='{{ index == 1 }}'>內容一</view>
<view class='content' wx:if='{{ index == 2 }}'>內容二</view>
<view class='content' wx:if='{{ index == 3 }}'>內容三</view>
<view class='content' wx:if='{{ index == 4 }}'>內容四</view>
<view class='content' wx:if='{{ index == 5 }}'>內容五</view>
<view class='content' wx:if='{{ index == 6 }}'>內容六</view>
<view class='content' wx:if='{{ index == 7 }}'>內容七</view>
<view class='content' wx:if='{{ index == 8 }}'>內容八</view>

wxss部分：

.tab{
  height: 50px;
  width: 80px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
}

.tab:nth-child(odd){
  background-color: #ccc;
}

.content{
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
}