用uniapp写一个scroll-view多列表切换代码

可以参考以下代码：

<template>
  <view>
    <scroll-view class="scroll-view" scroll-x="true">
      <view class="tab-item" :class="{active: activeIndex === index}" v-for="(item, index) in tabs" :key="index" @tap="handleTabClick(index)">{{item}}</view>
    </scroll-view>
    <view class="list-wrap">
      <view class="list" v-show="activeIndex === 0">
        <view v-for="(item, index) in list1" :key="index">{{item}}</view>
      </view>
      <view class="list" v-show="activeIndex === 1">
        <view v-for="(item, index) in list2" :key="index">{{item}}</view>
      </view>
      <view class="list" v-show="activeIndex === 2">
        <view v-for="(item, index) in list3" :key="index">{{item}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['列表1', '列表2', '列表3'],
      activeIndex: 0,
      list1: ['列表1-1', '列表1-2', '列表1-3'],
      list2: ['列表2-1', '列表2-2', '列表2-3'],
      list3: ['列表3-1', '列表3-2', '列表3-3']
    }
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style>
.scroll-view {
  display: flex;
  white-space: nowrap;
}

.tab-item {
  padding: 20rpx 30rpx;
  font-size: 32rpx;
  color: #999;
}

.tab-item.active {
  color: #333;
  border-bottom: 4rpx solid #333;
}

.list-wrap {
  height: calc(100vh - 200rpx);
  overflow: auto;
}

.list {
  padding: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;
  color: #333;
}
</style>

其中，我们使用了一个 `scroll-view` 实现了多个横向滚动的标签，并用 `v-for` 渲染了多个列表，通过 `v-show` 根据 `activeIndex` 的值来显示或隐藏对应的列表。最后，我们使用了 `@tap` 监听标签的点击事件，并将 `activeIndex` 的值更新为点击的标签的索引，从而实现了多列表切换。