wxml
<view?style="background:?#fff;">
??<view?class="swiper-tab">
????<view?class="swiper-tab-item"?data-current="0"?bindtap="clickTab">
??????門店環(huán)境
??????<i?class="?{{currentTab==0?'active':''}}"></i>
????</view>
????<view?class="swiper-tab-item"?data-current="1"?bindtap="clickTab">
??????團(tuán)隊(duì)風(fēng)采
??????<i?class="?{{currentTab==1?'active':''}}"></i>
????</view>
??</view>
??<view?class="{{currentTab==0???'show':'hidden'}}">
????<scroll-view>
??????<view?class="swiperitems">
????????<image?class=""?src="../../images/icon_chaoshi.png"></image>
????????<image?class=""?src="../../images/icon_chaoshi.png"></image>
??????</view>
????</scroll-view>
??</view>
??<view?class="{{currentTab==1???'show':'hidden'}}">
????<scroll-view>
??????<view?class="swiperitems">
????????<image?class=""?src="../../images/icon_ertong.png"></image>
??????</view>
????</scroll-view>
??</view>
</view>
js
data {
currentTab:?0
},
//滑動(dòng)切換
??swiperTab:?function?(e)?{
????var?that?=?this;
????that.setData({
??????currentTab:?e.detail.current
????});
??},
??//點(diǎn)擊切換
??clickTab:?function?(e)?{
????var?that?=?this;
????if?(this.data.currentTab?===?e.target.dataset.current)?{
??????return?false;
????}?else?{
??????that.setData({
????????currentTab:?e.target.dataset.current
??????})
????}
??},
wxss
.swiper-tab-item{
??display:?inline-block;
??width:?50%;
??color:#333;
}
?i.active{
display:?block;
border-bottom:?6rpx?solid?#00B1C5;
width:?60rpx;
margin-left:?62rpx;
}
.about_page{
??margin:?0?10px;
}
.swiper-tab{
??width:?50%;
??/*?border-bottom:?2rpx?solid?#ccc;?*/
??text-align:?center;
??height:?50rpx;
??line-height:?50rpx;
??display:?flex;
??flex-flow:?row;
??justify-content:?space-between;
??color:?#ccc;
??font-size:?16px;
??background:?#fff;
}
.swiper-tab-item{
??width:?50%;?
??color:#333;
}
.juzhong{
??margin:?0?auto;
}
.domain{
??background-color:?#fff;
??height:?100%;
??margin:0?10px;
}
.show{
??display:?block;
??margin:?26rpx?30rpx;
}
.hidden{
??display:?none;
}
.swiperitems?{
background:?#fff;
??margin:?24rpx?40rpx;
}
.swiperitems?image?{
??margin:?0?auto?20rpx;
??width:?100%;
}
效果
