微信小程序tab切换效果

微信小程序中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
        })
    },

})

希望对有需要的人提供帮助~~~