小程序?qū)崿F(xiàn)tab切換很簡單，只需要完成兩部分。
1.頁面
2.js觸發(fā)時間

先上效果：

image.png

接下來介紹頁面代碼：

控制切換的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>

要切換的內(nèi)容：

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

js觸發(fā)事件

//點擊切換
  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;
}