用Uniapp写一个多列表tabs切换代码

好的，以下是一个简单的多列表tabs切换的示例代码：

<!-- 在页面的 template 中定义 tabs 组件 -->
<template>
  <view>
    <uni-tabs v-model="currentTab" :tabs="tabs">
      <!-- 循环渲染 tabs -->
      <uni-tab v-for="(item,index) in tabs" :key="index" :title="item.title"></uni-tab>
    </uni-tabs>

    <!-- 循环渲染不同的列表 -->
    <view v-for="(item,index) in lists" :key="index" v-show="currentTab === item.type">
      <ul>
        <li v-for="(listItem, listIndex) in item.list" :key="listIndex">
          {{ listItem }}
        </li>
      </ul>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的 tab 的下标
      tabs: [
        { title: "类型A" },
        { title: "类型B" },
        { title: "类型C" },
      ],
      lists: [
        { 
          type: 0, // 与 tabs 数组中的下标对应
          list: [
            "类型A的第1个列表项",
            "类型A的第2个列表项",
            "类型A的第3个列表项",
          ],
        },
        {
          type: 1, // 与 tabs 数组中的下标对应
          list: [
            "类型B的第1个列表项",
            "类型B的第2个列表项",
            "类型B的第3个列表项",
          ],
        },
        {
          type: 2, // 与 tabs 数组中的下标对应
          list: [
            "类型C的第1个列表项",
            "类型C的第2个列表项",
            "类型C的第3个列表项",
          ],
        },
      ],
    };
  },
};
</script>

在这个示例中，我们使用了 `uni-tabs` 组件来实现多个列表的切换。`tabs` 数组定义了每个 tab 的标题，而 `lists` 数组定义了每个列表对应的数据。`currentTab` 属性用于记录当前选中的 tab 的下标，以便在展示列表时根据当前选中的 tab 进行筛选。在页面中循环渲染 tabs 组件和不同的列表，使用 `v-show` 属性根据当前选中的 tab 控制列表的显示和隐藏。

希望这个示例可以帮助你实现多列表tabs切换。