小程序选项卡，tab导航栏

image.png

wxml

<view class="tab">
    <view class="time {{ timetab == 0 ? 'cur' : ''}}" data-idx="0" bindtap="_gonghaiTime">推荐</view>
    <view class="time {{ timetab == 1 ? 'cur' : ''}}" data-idx="1" bindtap="_gonghaiTime">最新</view>
</view>

wxss

.time {
    color: #929292;
    font-size: 28rpx;
    padding: 0 20rpx;
}
.time::after {
    display: flex;
    content: '';
    height: 6rpx;
    width: 40rpx;
    margin: 8rpx auto 0;
    border-radius: 3rpx;
}
.time.cur {
    color: #2c2c2c;
    font-size: 32rpx;
}
.time.cur::after {
    display: flex;
    content: '';
    background: #8564f0;
    height: 6rpx;
    width: 40rpx;
    margin: 8rpx auto 0;
    border-radius: 3rpx;
}

js

Page({
    data: {
        timetab: 0,
    },
    _gonghaiTime(res) {
        this.setData({
            timetab: res.target.dataset.idx,
        })
        console.log(res)
    }
})

讲解

wxml里面的data-idx="0"是自定义的数据，我们用这个种方法代替下标值。

image.png