html:
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">111111</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">222222</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">333333</view>
</view>
<view class = "{{currentTab==0 ? 'show':'hidden'}}">
<scroll-view>
<text>111111</text>
</scroll-view>
</view>
<view class = "{{currentTab==1 ? 'show':'hidden'}}">
<scroll-view>
<text>222222</text>
</scroll-view>
</view>
<view class = "{{currentTab==2 ? 'show':'hidden'}}">
<scroll-view>
<text>333333</text>
</scroll-view>
</view>
js:
data: {
currentTab: 0,
},
//点击切换
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current,
})
}
},
css:
.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;
}