<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