微信小程序自定義選項卡

本篇博客介紹在微信小程序中如何自定義選項卡

效果如下：

shopping.wxml：

<view class='topTabSwiper'>
  <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}' data-current="0" bindtap='checkCurrent'>美食</view>
  <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}' data-current="1" bindtap='checkCurrent'>旅游</view>
  <view class='tab  {{currentData == 2 ? "tabBorer" : ""}}' data-current="2" bindtap='checkCurrent'>生活</view>
  <view class='tab  {{currentData == 3 ? "tabBorer" : ""}}' data-current="3" bindtap='checkCurrent'>特產</view>
  <view class='tab  {{currentData == 4 ? "tabBorer" : ""}}' data-current="4" bindtap='checkCurrent'>熱賣</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item>
    <view class='swiper_con'>welcome come to 美食</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>welcome come to 旅游</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>welcome come to 生活</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>welcome come to 特產</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>welcome come to 熱賣</view>
  </swiper-item>
</swiper>

shopping.js：

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    currentData: 0,
  },
  //獲取當前滑塊的index
  bindchange: function (e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //點擊切換，滑塊index賦值
  checkCurrent: function (e) {
    const that = this;
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  }
})

shopping.wxss：

.tab {
  float: left;
  width: 20%;
  text-align: center;
  padding: 10rpx 0;
}

/* 導航欄整體樣式 */
.topTabSwiper {
  background-color: white;
  padding: 2% 0;
}

.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}

/* 選中樣式 */
.tabBorer {
  color: red;
  border-bottom: 2px solid red;
}

.swiper swiper-item {
  text-align: center;
  margin-top: 50rpx;
}

END！