Vue封装轮播图组件 (传入链接、图片即可使用)

最新推荐文章于 2025-05-16 22:07:57 发布

原创

最新推荐文章于 2025-05-16 22:07:57 发布 · 5k 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #css3 #html5

本文介绍如何在Vue中封装一个轮播图组件，仅需传入包含链接和图片的数组即可工作。通过Swiper.vue和SwiperItem.vue源码解析，展示组件的实现过程，并在主组件中演示了使用方法。

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

1.先看效果图：
在这里插入图片描述

2.目录：
在这里插入图片描述
3.Swiper.vue源码：

<template>
  <div id="mySwiper">
    <div
      class="swiper"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <slot></slot>
    </div>

    <div class="indicator">
      <div
        class="indicatorItem"
        v-for="(item, index) in slideCount"
        :key="index"
        :class="{ active: index === currentIndex - 1 }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
   
   
  name: "Swiper",
  props: {
   
   },
  data: function() {
   
   
    return {
   
   
      slideCount: 0,
      interval: 3000,
      imgWidth: 0, //swiper每张图片的宽度一样
      swiperStyle: {
   
   }, //利用swiper的style对象来控制着“过渡”
      currentIndex: 1, //记录当前滑动的下标
      scrolling: false, //当用手触摸和移动时,则暂停滚动
      animalDuration: 300, //切换一张图片0.3
      showIndicator: true, //当只有一张图片时，不显示小点点
      moveRatio: 0.25,
      playTimer: null, //控制着计时器的开始与暂停
      moveRatio: 0.25
    };
  },
  methods: {
   
   
    handleDom: function() {
   
   
      let swiperEle = document.querySelector(".swiper");
      let slideEles = document.getElementsByClassName("slide");
      this.slideCount = slideEles.length;
      console.log(this.slideCount);
      if