小程序选项卡
wxml
<view style="background: #fff;">
<view class="swiper-tab">
<view class="swiper-tab-item" data-current="0" bindtap="clickTab">
门店环境
<i class=" {{currentTab==0?'active':''}}"></i>
</view>
<view class="swiper-tab-item" data-current="1" bindtap="clickTab">
团队风采
<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
},
//滑动切换
swiperTab: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
//点击切换
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%;
}
效果
