Vant3 的 van-swipe 组件用于实现轮播效果。以下是一个简单的例子,演示如何在 Vue 组件中使用 Vant3 的 Swipe:
<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>

在上述代码中,我们使用了 van-swipe 组件,并在其中使用 van-swipe-item 组件创建了每个轮播项。通过 v-for 遍历 swiperList 数组,动态生成轮播项的内容。

可以通过设置 :autoplay 属性来控制是否自动播放,通过 :interval 属性来设置自动播放的间隔时间,单位为毫秒。

确保你的项目已经正确引入了 Vant3 并按照文档配置,以确保组件能够正常工作。你还可以根据实际需求定制轮播的样式和行为。


转载请注明出处:http://www.zyzy.cn/article/detail/5759/Vant