vant轮播组件的使用(vue)

最新推荐文章于 2025-05-14 16:48:00 发布

原创最新推荐文章于 2025-05-14 16:48:00 发布 · 1.5w 阅读

7 ·

CC 4.0 BY-SA版权

Vant 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/t1/39343/4/1551/48272/5cbd71f4E329401dc/579b33f530a1402d.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34729/14/3948/120618/5cbeee07Efbe17ec5/d57ddd4fbbbc09e0.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34423/17/5378/97852/5cbecd7bE73730c2f/76e5359d8fb3a1e1.jpg!cr_1125x549_0_72!q70.jpg.dpg"
      ]
    }
  },
  components: {
   
  },
  methods: {
	
  }
}
</script>
<style lang="scss" scoped>
   .swiper {
     width: 100%;
     height: 3.4rem;
    .van-swipe{
      width: 100%;height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      background: #fff;
    }
  }
</style>