个人技术分享

效果图

代码

<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;
}