van-list嵌套van-tabs 使用

可以使用 Van-tabs 嵌套 Van-list 来实现选项卡切换时显示不同的列表内容。

具体实现步骤如下：

1. 引入 Van-tabs 和 Van-list 组件：在需要使用的页面中，引入 Van-tabs 和 Van-list 组件。

<template>
  <div>
    <van-tabs v-model="activeTab">
      <van-tab title="选项卡1"></van-tab>
      <van-tab title="选项卡2"></van-tab>
    </van-tabs>
    <van-list v-if="activeTab === 0">
      <van-cell v-for="(item, index) in list1" :key="index">{{ item }}</van-cell>
    </van-list>
    <van-list v-if="activeTab === 1">
      <van-cell v-for="(item, index) in list2" :key="index">{{ item }}</van-cell>
    </van-list>
  </div>
</template>

2. 定义数据：在 data 中定义一个变量 activeTab，用于记录当前选中的选项卡的索引值，以及两个列表数据 list1 和 list2。

<script>
export default {
  data() {
    return {
      activeTab: 0,
      list1: ['列表1项1', '列表1项2', '列表1项3'],
      list2: ['列表2项1', '列表2项2', '列表2项3']
    }
  }
}
</script>

3. 使用：根据实际需求，使用 Van-tabs 和 Van-list 组件来展示选项卡和对应的列表内容。

在上述示例中，使用了 v-if 来判断当前选中的选项卡是哪个，从而显示对应的列表内容。当选项卡为第一个时，显示 list1 中的列表项；当选项卡为第二个时，显示 list2 中的列表项。