11.常用标题切换

喵喵喵.png

<view class="title">
    <view class="{{showing==1?'on':''}}" bindtap="show_left">待配送(6)</view>
    <view class="{{showing==2?'on':''}}" bindtap="show_right">已配送(8)</view>
</view>


    show_left() {
        this.setData({
            showing: 1
        })
    },
    show_right() {
        this.setData({
            showing: 2
        })
    },


.title {
    height: 90rpx;
    background: #fff;
    padding-top: 25rpx;
    display: flex;
    color: #333;
    margin-bottom: 20rpx;
    padding-left:40rpx;
    padding-right:40rpx;
}

.title view {
    width: 50%;
    text-align: center;
    font-size: 32rpx;
    position: relative;
}

.title view.on {
    color: #DC0101;
}

.title view.on:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -1rpx;
    width: 60rpx;
    height: 4rpx;
    display: block;
    border-bottom: 4rpx solid #DC0101;
    z-index: 15;
}