Vue组件之路，轮播图全面解析！

2023-12-13 15:25:28

众所周知，轮播图最为我大前端最最常见的组件之一，应该说每个前端工程师都要会写一遍吧。正好这两天在家休息，便在家写了这个组件。废话少说，本人的轮播图特点如下：

常规左右滑动切换
无缝切换
自动播放
定时切换
手势控制
响应式布局

当然，做到这些功能的前提下，我还尽可能的减少代码量，让它更加易于阅读和理解。

组件结构

组件的结构非常简单，只有两个文件，一个.vue文件和一个.css文件。

<template>
  <div class="carousel">
    <ul class="carousel-inner">
      <li class="carousel-item active">
        <img src="image1.jpg" alt="Image 1">
      </li>
      <li class="carousel-item">
        <img src="image2.jpg" alt="Image 2">
      </li>
      <li class="carousel-item">
        <img src="image3.jpg" alt="Image 3">
      </li>
    </ul>
    <a class="carousel-control-prev" href="#" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

.carousel {
  position: relative;
  width: 100%;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.carousel-item.active {
  display: block;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5%;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

组件使用

要使用该组件，只需在你的Vue文件中导入并注册它，然后在模板中使用它即可。

import Carousel from './Carousel.vue';

export default {
  components: {
    Carousel
  }
};

<template>
  <div>
    <carousel></carousel>
  </div>
</template>

组件功能

该组件提供了以下功能：

常规左右滑动切换
无缝切换
自动播放
定时切换
手势控制
响应式布局

常规左右滑动切换

这是最基本的功能，只需在.carousel-inner元素上添加touchstart、touchmove和touchend事件监听器，然后根据触摸事件的起始位置和结束位置来判断是向左滑动还是向右滑动，再切换相应的轮播图即可。

mounted() {
  const carouselInner = this.$refs.carouselInner;

  let startX = 0;
  let endX = 0;

  carouselInner.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
  });

  carouselInner.addEventListener('touchmove', (e) => {
    endX = e.touches[0].clientX;
  });

  carouselInner.addEventListener('touchend', (e) => {
    if (endX - startX > 0) {
      this.prev();
    } else if (endX - startX < 0) {
      this.next();
    }
  });
}

无缝切换

无缝切换是指当轮播图切换时，当前轮播图和下一轮播图同时显示，然后下一轮播图逐渐淡入，而当前轮播图逐渐淡出。

next() {
  const currentItem = this.$refs.carouselInner.querySelector('.carousel-item.active');
  const nextItem = currentItem.nextElementSibling;

  if (nextItem) {
    nextItem.classList.add('carousel-item-next');

    setTimeout(() => {
      currentItem.classList.remove('active');
      nextItem.classList.remove('carousel-item-next');
      nextItem.classList.add('active');
    }, 300);
  }
}

自动播放

自动播放是指轮播图自动切换，而无需用户手动操作。

mounted() {
  this.interval = setInterval(() => {
    this.next();
  }, 3000);
}

beforeDestroy() {
  clearInterval(this.interval);
}

定时切换

定时切换是指轮播图在指定的时间间隔内切换。

next() {
  const currentItem = this.$refs.carouselInner.querySelector('.carousel-item.active');
  const nextItem = currentItem.nextElementSibling;

  if (nextItem) {
    nextItem.classList.add('carousel-item-next');

    setTimeout(() => {
      currentItem.classList.remove('active');
      nextItem.classList.remove('carousel-item-next');
      nextItem.classList.add('active');
    }, 300);

    setTimeout(() => {
      this.next();
    }, 3000);
  }
}

手势控制

手势控制是指用户可以通过手势来控制轮播图的切换。

mounted() {
  const carouselInner = this.$refs.carouselInner;

  let startX = 0;
  let endX = 0;

  carouselInner.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
  });

  carouselInner.addEventListener('touchmove', (e) => {
    endX = e.touches[0].clientX;
  });

  carouselInner.addEventListener('touchend', (e) => {
    if (endX - startX > 0) {
      this.prev();
    } else if (endX - startX < 0) {
      this.next();
    }
  });
}

响应式布局

响应式布局是指轮播图能够适应不同的屏幕尺寸。

@media (max-width: 768px) {
  .carousel {
    width: 100%;
  }

  .carousel-inner {
    width: 100%;
  }

  .carousel-item {
    width: 100%;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 20%;
  }
}