筆者之前嘗試著其他教程：使用swiper來做切換。但是小程式中swiper存在很多限制，比如高度的限制，所以放棄了這種方案，本文將提供另一個方案。

小程式實現tab切換很簡單，只需要完成兩部分。
1.編寫頁面
2.編寫js觸發事件

先上效果圖：

接下來介紹頁面程式碼：

控制切換的Tab

<view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">做什麼</view>
    <
 
view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">推薦站點</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">作者</view>
  </view>

要切換的內容：

<view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
    <
 
scroll-view>
      <text>暫無內容1</text>
    </scroll-view>
  </view>
  <view class = "{{currentTab == 1 ? 'show':'hidden'}}" >
    <scroll-view>
      <text>暫無內容2</text>
    </scroll-view>
  </view>
  <view class = "{{currentTab == 2 ? 'show':'hidden'}}">
    <
 
scroll-view>
      <text>暫無內容3</text>
    </scroll-view>
  </view>

js觸發事件 在對應頁面的js檔案中加入如下方法。

//點選切換
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }

頁面樣式 這個不重要，可以按照個人效果隨便修改。

/* pages/about/about.wxss */
.about_page{
  margin: 0 10px;
}
.swiper-tab{
    width: 100%;
    /* border-bottom: 2rpx solid #ccc; */
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    color: #ccc;
    font-size: 16px;
}
.swiper-tab-item{
    width: 30%; 
    color:#434343;
}
.active{
    color:#F65959;
    /* border-bottom: 4rpx solid #F65959; */
    font-size: 16px;
    font-weight: bold;
}
.juzhong{
  margin: 0 auto;
}
.domain{
  background-color: #fff;
  height: 100%;
  margin:0 10px;
}
.show{
  display: block;
}
.hidden{
  display: none;
}