vant轮播组件的使用(vue)

最新推荐文章于 2024-08-24 15:30:52 发布

路不在自己脚下

最新推荐文章于 2024-08-24 15:30:52 发布

阅读量1.5w

点赞数 1

分类专栏： Vant

本文链接：https://blog.csdn.net/qq_43579525/article/details/90142146

版权

本文介绍了在Vue项目中如何使用Vant UI库的轮播组件，重点讲解了swiper.vue的配置与应用，帮助开发者实现动态轮播效果。

摘要由CSDN通过智能技术生成

1.swiper.vue

<template>
     <div class="swiper">
      <van-swipe :autoplay="5000" :loop="false" indicator-color="#fff">
        <van-swipe-item v-for="(image, index) in SwiperImg" :key="index">
          <img :src="image">
        </van-swipe-item>
      </van-swipe>
    </div>
</template>

<script>
// import Icons from "@/components/home-components/Icon.vue";
export default {
  name: 'swiper',
  data () {
    return {
    SwiperImg: [
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/39343/4/1551/48272/5cbd71f4E329401dc/579b33f530a1402d.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34869/14/3703/113972/5cb953c1E4294d8ea/b73c538710f5c462.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t