<template>
  <div>
    <!-- Vant Swipe 轮播组件 -->
    <van-swipe :autoplay="3000" :indicator-color="indicatorColor" @change="onChange">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="轮播图片">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图片数组
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ],
      // 指示器颜色
      indicatorColor: '#1989fa',
    };
  },
  methods: {
    // 轮播切换时触发的事件
    onChange(index) {
      console.log('当前轮播项索引：', index);
    },
  },
};
</script>