来说个老生常谈的问题 选项卡

选项卡这个东西 怎么说 找个插件随便就加上了 但是插件的东西 真的不好改样式 改死人

干脆自己写一个得了

<view class="wrap"><view class="tab {{index == active ? 'active' : ''}}" wx:for="{{tab}}" wx:key="index" data-index="{{index}}" bindtap="checkItem">{{item.name}}</view>
</view><view wx:if="{{active == 0}}">1</view>
<view wx:if="{{active == 1}}">2</view>
<view wx:if="{{active == 2}}">3</view>

data: {active: 0,
}checkItem(e) {this.setData({active: e.currentTarget.dataset.index})},

.wrap{width: 100%;height: 80rpx;padding:0 40rpx;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;background-color: #fff;margin-bottom: 24rpx;
}
.tab{height: 80rpx;background-color: #fff;display: inline-block;text-align: center;line-height: 80rpx;position: relative;  
}
.active::before{content: '';display: inline-block;width: 30rpx;height: 6rpx;border-radius: 5rpx;background-color:#3469F1;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);
}
.active{font-weight: 700;color: #3469F1;
}
.tab:nth-child(1){text-align: left;
}
.tab:nth-child(3){text-align: right;}

原理还是比较简单 通过动态绑定index  然后下面的div通过active来判断是否显示    我的css写的还是有点东西的 感兴趣的可以看看