控制切换的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, }) }页面样式
.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; }