Vue3-APP首页Swiper组件实现轮播图

最新推荐文章于 2025-09-24 11:52:15 发布

原创最新推荐文章于 2025-09-24 11:52:15 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #Swiper

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文档介绍了如何在Vue3项目中引入和封装Swiper组件，用于实现首页轮播图功能。首先，展示了Swiper的基本结构和配置项，然后通过调整样式和添加插槽以适应不同场景需求。接着，详细说明了如何定义组件的props和事件，并提供了组件的使用示例，包括在模板中插入图片和自定义标签。最后，展示了封装后的Swiper组件在首页实际应用的效果。

引入Swiper,封装自己的Swiper组件

npm i swiper

引入初始代码

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

.swiper-container {
    width: 600px;
    height: 300px;
}

 this.swiper = new Swiper ('#swiperIndex'+this.id, {
     // direction: 'vertical', // 垂直切换选项
     loop: this.loop, // 循环模式选项
     autoplay: this.autoplay,
     // 如果需要分页器
     pagination: {
         el: '.swiper-pagination',
         clickable: true
     },
     on: {
         slideChangeTransitionStart: ()=>{
             this.$emit('slideChangeTransitionStart')
         },
         slideChangeTransitionEnd: ()=>{
             this.$emit('slideChangeTransitionEnd')
         }
     }
 })

根据自己的需要对格式进行调整，对结构进行删减

/*less*/
.swiper-container {
   width: 100%;
   height: 150px;
   display: flex;
   justify-content: center;
   .swiper-slide {
       width: 100%;
       height: 150px;
       display: flex;
       justify-content: center;
       img {
           width: 96%;
           height: 150px;
           border-radius: 5px;
       }
   }
}

这里使用了slot插槽

<div class="swiper-container" :id="'swiperIndex'+id">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,i) in imgList" :key="i">
            <slot :item="item"></slot>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>

在props中给参数默认值

    props: {
        imgList: {
            type: Array,
            default: []
        },
        loop: {
            type: Boolean,
            default: true
        },
        autoplay: {
            type: Boolean,
            default: false
        }
    },

提取成一个新的组件等待调用即可。

在首页引用上一步封装的Swiper组件

在上一步封装的组件里使用了插槽，在引用组件时，需传入组件需要的props

<Swiper
  @click="swiperFn"
  ref="mySwiper"
  class="swiper"
  :imgList="imgList"
  style="position: relative"
  :autoplay="true"
>
<!--template组件不会渲染DOM-->
  <template v-slot="slotProps">
    <img :src="slotProps.item.pic" alt />
    <span
      class="tag"
      style="position: absolute; bottom: 5px; right: 20px; background:red;padding: 0 5px; border-radius: 3px;color:#fff;"
    >新歌首发</span>
  </template>
</Swiper>