微信小程序中tab切换效果简单实现方法梨子
wxml
<view class='a_bar '>
<text class="{{selectednow?'active':'default'}}" bindtap="selectednow">京东</text>
<text class="{{selectednext?'active':'default'}}" bindtap="selectednext">天猫</text>
</view>
<view class="{{selectednow?'show':'hidden'}}">京东子内容</view>
<view class="{{selectednext?'show':'hidden'}}">天猫子内容</view>
wxss
.a_bar{
position: relative;
}
.more_chanpin .a_bar text{
width: 375rpx;
float: left;
height: 88rpx;
background: #F5F5F5;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
color: #A1A1A1;
}
.more_chanpin .a_bar text.active{
background: #E4E4E4;
color: #353849;
}
js
Page({
data: {
// tab 切换
selectednow: true,
selectednext: false
},
// tab 切换
selectednow: function (e) {
this.setData({
selectednext: false,
selectednow: true
})
},
selectednext: function (e) {
this.setData({
selectednow: false,
selectednext: true
})
},
})
希望对有需要的人提供帮助~~~