uniapp 小程序轮播图+缩略图展示（用两个swiper，通过相同的current来实现联动）

UniApp小程序中的轮播图+缩略图展示通常通过Vuetify或者vant-weapp这样的UI组件库来实现。你可以创建两个Swiper组件，一个是主轮播图（main swiper），另一个是缩略图滑块（thumbnail swiper）。这两个滑块会共享当前选中的索引（current index），以此达到联动效果。

以下是一个基本的步骤说明：

1. 首先，安装所需库（如 vant-swiper）：

   npm install vant-weapp vant-swipe

2. 在页面模板部分引入并使用Swiper组件：

<template>
  <view>
    <!-- 主轮播图 -->
    <van-swipe v-model="currentIndex" @change="onSlideChange">
      <van-swipe-item v-for="(item, index) in items" :key="index">
        <img :src="item.src" alt="图片描述" />
      </van-swipe-item>
    </van-swiper>

    <!-- 缩略图滑块 -->
    <van-swipe @click-item="onThumbnailClick">
      <van-swipe-item v-for="(item, index) in items" :key="index" :class="{ active: currentIndex === index }">
        <image :src="item.src" @click="onThumbnailClick(index)" />
      </van-swipe-item>
    </van-swipe>
  </view>
</template>

3. 定义数据模型和方法：

<script setup>
import { ref } from 'vue';
import { vanSwipeItem } from 'vant/weapp';

const items = [
  // 图片列表，包括源URL
];

const currentIndex = ref(0);
const onSlideChange = (index) => {
  currentIndex.value = index;
};
const onThumbnailClick = (index) => {
  if (index !== currentIndex.value) {
    currentIndex.value = index; // 当点击缩略图时，更新主轮播图
  }
};

export default {
  data() {
    return {
      items,
      currentIndex,
    };
  },
  directives: {
    vanSwipeItem,
  },
  methods: {
    ...，
  },
};
</script>