<template>
  <div>
    <!-- 使用 van-swipe 组件 -->
    <van-swipe :autoplay="autoplay" :interval="interval">
      <van-swipe-item v-for="(item, index) in swiperList" :key="index">
        <!-- 每个轮播项的内容 -->
        <img :src="item.image" alt="轮播图片" style="width: 100%;" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 是否自动播放
    const autoplay = ref(true);

    // 自动播放间隔时间，单位为毫秒
    const interval = ref(3000);

    // 轮播项的数据列表
    const swiperList = ref([
      { image: 'https://img.yzcdn.cn/vant/apple-1.jpg' },
      { image: 'https://img.yzcdn.cn/vant/apple-2.jpg' },
      { image: 'https://img.yzcdn.cn/vant/apple-3.jpg' },
    ]);

    return {
      autoplay,
      interval,
      swiperList,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>