Vue实现swiper轮播组件

最新推荐文章于 2025-06-25 11:11:50 发布

叁柒柒

最新推荐文章于 2025-06-25 11:11:50 发布

阅读量4.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端组件文章标签： vue javascript es6 ui css3

本文链接：https://blog.youkuaiyun.com/qq_45752104/article/details/109142129

本文介绍了如何使用Vue实现一个带有动画效果的轮播组件，包括轮播元素、分页器和导航按钮的设计思路。通过设置轮播速度和是否显示分页器，满足自定义需求。文章详细讲解了轮播实现的原理，强调了内层元素在移动过程中的关键处理，以及代码实现的细节。源码已上传至GitHub，后续计划加入移动端滑动效果。

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

目前市面上有很多轮播组件，但是有的不满足业务需求，因此也需要自己首先轮播组件。以下是一个用vue实现的轮播组件，带动画效果，可以自行设置轮播速度，选择是否需要分页器等。效果如下：
轮播效果图

思路：

结构：一个轮播组件应该由三部分组成，一是轮播的元素，如图片等；二是底部的分页器；三是前一张，后一张的按钮；
轮播实现：外层元素有固定的宽度，形成一个展示窗口，内层的轮播元素排列在窗口后面，定时移动内层元素，从而实现轮播。
注意点：当内层元素不断向左移动到达最后一个元素后，下一次移动需要将最后一个元素移动到第一个元素，且需要看起来是内层元素向左移动到达的第一个元素。因此需要在最后一个元素后面拼接第一个元素，当其从最后一个元素移动到第一个元素后，需要神不知鬼不觉的将其移动到第一个元素。如下图，褐色部分代表外部窗口，蓝色部分是内部元素。

在这里插入图片描述
代码实现：

外层元素通过一个div实现，通过overflow：hidden可以显示内层元素的一部分。内层元素的宽度由元素的个数确定。
通过setInterval定时器，启动内部元素定时移动，移动可以通过position：absolut配合改变left值实现，也可以通过改变tansform值实现，还可以通过margin-left实现。通过transition实现动画效果。
判断是否要连续播放，若需要，则在最后一个元素后面拼接第一个元素，并通过tansitionend事件去除动画效果后将最后一个元素移动到第一个元素。

源码地址：https://github.com/377-dsq/ddcom/tree/master

swiper组件：

<template>
  <div class="swiper">
      <div class="swiper-container">
        <div class="swiper-wrap" ref="swiperwrap" @transitionend='checkBorder'>
          <slot></slot>
        </div>
        <div class='pagination' v-if="pagination">
          <span 
            class='indicator' 
            v-for="(item,index) in indCount" :key='index'
            :class="{'picked':currentIndex===index}"
            @click='pickItem(index)'
            ></span>
        </div>
        <div class="swiperbtn" v-if="btn">
          <div class="pre-btn" @click="preItem"></div>
          <div class="next-btn" @click="nextItem"></div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
   
   
  name: 'dsq-swiper',
  data() {
   
   
    return {
   
   
      count: 0, //轮播元素的个数
      currentIndex: 0, //当前元素的索引
      timer: null, //启动自动播放的定时器
      onceTimer: null,  
      width: 0,  //窗口的宽度，每一个移动内部元素的距离
      indCount: 0  //分页器中icon的个数
    }
  },
  props