小程序实现tab切换很简单，只需要完成两部分。
1.页面
2.js触发时间

先上效果：

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>

要切换的内容：

<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触发事件

//点击切换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;
}