zh_tv/pages/index/components/list.vue

<template>
  <view class="container">
    <!-- 顶部 Tab 切换 -->
    <scroll-view scroll-x class="tab-scroll">
      <view class="tabs">
        <view 
          v-for="(tab, index) in tabList" 
          :key="index" 
          :class="['tab', currentSwiperIndex === index ? 'active' : '']"
          @click="onTabChange(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </scroll-view>

    <!-- Swiper 内容区 -->
    <swiper 
      :current="currentSwiperIndex" 
      @change="onSwiperChange"
      class="swiper-container"
    >
      <swiper-item v-for="(tab, tabIndex) in tabList" :key="tabIndex">
        <!-- 单个列表页 -->
        <scroll-view 
          scroll-y 
          class="list-scroll"
          @scroll="(e) => onListScroll(tabIndex, e)" 
          :scroll-top="tab.scrollTop"
        >
          <view class="list">
            <view 
              v-for="(item, itemIndex) in tab.listData" 
              :key="itemIndex" 
              class="list-item"
            >
               {{ item }}
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentSwiperIndex: 0, // 当前显示的 swiper-item 索引
      tabList: [ // 所有 Tab 及其对应的列表数据
        { 
          name: '标签1', 
          listData: ['项目1-1', '项目1-2', '项目1-3', /* ...更多数据... */],
          scrollTop: 0 // 记录该列表的滚动位置
        },
        { 
          name: '标签2', 
          listData: ['项目2-1', '项目2-2', '项目2-3', /* ... */],
          scrollTop: 0
        },
        // ...更多 Tab...
      ]
    };
  },
  methods: {
    // 点击 Tab 切换
    onTabChange(index) {
      this.currentSwiperIndex = index;
    },
    // Swiper 滑动切换
    onSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },
    // 记录每个列表的滚动位置
    onListScroll(tabIndex, e) {
      this.tabList[tabIndex].scrollTop = e.detail.scrollTop;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.tab-scroll {
  white-space: nowrap;
  background-color: #f8f8f8;
}
.tabs {
  display: inline-flex;
}
.tab {
  padding: 20rpx 40rpx;
}
.tab.active {
  color: #007AFF;
  border-bottom: 4rpx solid #007AFF;
}
.swiper-container {
  flex: 1;
}
.list-scroll {
  height: 100%;
}
.list-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}
</style>