小程序如何实现tab切换，一部到位

笔者之前尝试着其他教程：使用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;
}