vant weapp中tabbar里面的info放在list数组里,如何动态改变它的数量
时间: 2024-03-13 21:48:00 浏览: 133
weapp-custom-tabbar:小程序 - 动态设置tabbar
在Vant Weapp的Tabbar组件中,每个Tab都有一个`info`属性,可以用来展示该Tab的数量。如果你想要动态改变它的数量,可以通过以下步骤实现:
1. 在Tabbar所在的页面的data中定义一个list数组,用来存储每个Tab的数量,例如:
```
data: {
list: [
{
name: 'Tab1',
info: 0
},
{
name: 'Tab2',
info: 0
},
{
name: 'Tab3',
info: 0
}
]
}
```
2. 在Tabbar组件的bind:change事件中,监听Tab的切换,并更新list数组中对应Tab的数量,例如:
```
onChange(event) {
const { index } = event.detail;
const { list } = this.data;
list[index].info = Math.ceil(Math.random() * 10); // 这里是随机生成一个数量,你可以根据你的业务逻辑来更新
this.setData({
list
});
}
```
3. 在Tabbar组件中使用list数组中每个Tab的数量来展示`info`,例如:
```
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{ list }}" wx:key="name" text="{{ item.name }}" info="{{ item.info }}" />
</van-tabbar>
```
这样,每次Tab切换的时候,对应Tab的数量就会被动态更新。
阅读全文