index.wxml
<view class='itemContent'>
<!--标签-->
<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>
<!--内容-->
<view class="{{currentTab == 0 ? 'show':'hidden'}}">
<view class='content'>
<view class='msg2'>
内容1
</view>
</view>
</view>
<view class="{{currentTab == 1 ? 'show':'hidden'}}">
<view class='content'>
<view class='msg2'>
内容2
</view>
</view>
</view>
</view>
index.wxss
.itemContent {
margin-top: 20rpx;
background: #fff;
padding-bottom: 120rpx;
}
.swiper-tab {
width: 100%;
text-align: center;
height: 100rpx;
line-height: 100rpx;
display: flex;
flex-flow: row;
justify-content: center;
color: #000;
font-size: 36rpx;
letter-spacing: 2rpx;
margin-bottom: 30rpx;
}
.swiper-tab-item {
color: #000;
}
.swiper-tab-item:first-child {
margin-right: 50rpx;
}
.active {
border-bottom: 10rpx solid #efe29e;
}
.show {
display: block;
}
.hidden {
display: none;
}
index.js
Page({
data: {
currentTab: 0
},
//照片展示 服务说明Tab标签
clickTab: function(e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
})