小程序van-tab的title(动态)根据文本内容,自适应宽度
- 效果图
- 代码
- 主要调整点
效果图
代码
<van-tabs color="#00aaff" active="{{ active }}" bind:click="onTabChange">
<van-tab title="7天内"></van-tab>
<van-tab title="15天内"></van-tab>
<van-tab title="30天内"></van-tab>
<van-tab title="{{tabsTitle}}"></van-tab>
</van-tabs>
data: {
active: 0,
tabsTitle: "自定义",
},
//选项卡切换
onTabChange(event) {
console.log(event, "eventeventeventevent")
let indexVal = event.detail.index;
if (indexVal == 3) {
this.setData({
tabsTitle: "这里有很长的数据会展示在title里",
});
} else {
this.setData({
tabsTitle: "自定义",
});
}
},
主要调整点
.van-tab:last-child {
flex: none!important;
}
我只需要适应最后一个tab所以给它flex置为none就可以,如果每一个都要适应,那么就
.van-tab{
flex: none!important;
}