vue使用swiper轮播图

简单轮播图的实现及原理讲解

---

swiper.vue

<template>
    <div id="hy-swiper">
      <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
        <slot></slot>
      </div>
      <slot name="indicator"></slot>
      <div class="indicator">
        <slot name="indicator" v-if="showIndicator && slideCount>1">
          <div v-for="(item, index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
        </slot>
      </div>
    </div>
</template>

<script>
	export default {
		name: "Swiper",
    props: {
      interval: { type: Number, default: 3000 },
      animDuration: {  type: Number, default: 300 },
      moveRatio: { type: Number,  default: 0.25 },
      showIndicator: {  type: Boolean, default: true }
    },
    data: function () {
		  return {
        slideCount: 0, // 元素个数
        totalWidth: 0, // swiper的宽度
        swiperStyle: {}, // swiper样式
        currentIndex: 1, // 当前的index
        scrolling: false, // 是否正在滚动
      }
    },
    mounted: function () {
      // 1.操作DOM, 在前后添加Slide
      setTimeout(() => {
        this.handleDom();   
        this.startTimer();	 // 2.开启定时器
      }, 100)
    },
    methods: {
		  /** * 定时器操作  */
      startTimer: function () {
		    this.playTimer = window.setInterval(() => {
		      this.currentIndex++;
		      this.scrollContent(-this.currentIndex * this.totalWidth);
        }, this.interval)
      },
      stopTimer: function () {  window.clearInterval(this.playTimer);  },

      /**  * 滚动到正确的位置  */
      scrollContent: function (currentPosition) {
        // 0.设置正在滚动
        this.scrolling = true;
        // 1.开始滚动动画
        this.swiperStyle.transition ='transform '+ this.animDuration + 'ms';
        this.setTransform(currentPosition);
        // 2.判断滚动到的位置
        this.checkPosition();
        // 4.滚动完成
        this.scrolling = false
      },

      /**  * 校验正确的位置  */
      checkPosition: function () {
        window.setTimeout(() => {
          // 1.校验正确的位置
          this.swiperStyle.transition = '0ms';
          if (this.currentIndex >= this.slideCount + 1) {
            this.currentIndex = 1;
            this.setTransform(-this.currentIndex * this.totalWidth);
          } else if (this.currentIndex <= 0) {
            this.currentIndex = this.slideCount;
            this.setTransform(-this.currentIndex * this.totalWidth);
          }
          // 2.结束移动后的回调
          this.$emit('transitionEnd', this.currentIndex-1);
        }, this.animDuration)
      },

      /** 设置滚动的位置 transform: translate3d(300px, 0, 0) ： x轴偏移300px */
      setTransform: function (position) {
        this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
        this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;
        this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;
      },

      /*** 操作DOM, 在DOM前后添加Slide */
		  handleDom: function () {
        // 1.获取要操作的元素
        let swiperEl = document.querySelector('.swiper');
        let slidesEls = swiperEl.getElementsByClassName('slide');
        // 2.保存个数
        this.slideCount = slidesEls.length;
        // 3.如果大于1个, 那么在前后分别添加一个slide
        if (this.slideCount > 1) {
          let cloneFirst = slidesEls[0].cloneNode(true);
          let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
          swiperEl.insertBefore(cloneLast, slidesEls[0]);
          swiperEl.appendChild(cloneFirst);
          this.totalWidth = swiperEl.offsetWidth;
          this.swiperStyle = swiperEl.style;
        }
        // 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)
        this.setTransform(-this.totalWidth);
      },

      /**   * 拖动事件的处理  */
      touchStart: function (e) {
        // 1.如果正在滚动, 不可以拖动
        if (this.scrolling) return;
        // 2.停止定时器
        this.stopTimer();
        // 3.保存开始滚动的位置
        this.startX = e.touches[0].pageX;
      },

      touchMove: function (e) {
        // 1.计算出用户拖动的距离
        this.currentX = e.touches[0].pageX;
        this.distance = this.currentX - this.startX;
        let currentPosition = -this.currentIndex * this.totalWidth;
        let moveDistance = this.distance + currentPosition;
        // 2.设置当前的位置
        this.setTransform(moveDistance);
      },

      touchEnd: function (e) {
        // 1.获取移动的距离
        let currentMove = Math.abs(this.distance);
        // 2.判断最终的距离
        if (this.distance === 0) {  return } 
        else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右边移动超过0.5
          this.currentIndex--
        } 
        else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 向左移动超过0.5
          this.currentIndex++
        }
        // 3.移动到正确的位置
        this.scrollContent(-this.currentIndex * this.totalWidth);
        // 4.移动完成后重新开启定时器
        this.startTimer();
      },

      /** * 控制上一个, 下一个 */
      previous: function () {  this.changeItem(-1);  },
      next: function () {   this.changeItem(1);  },

      changeItem: function (num) {
        // 1.移除定时器
        this.stopTimer();
        // 2.修改index和位置
        this.currentIndex += num;
        this.scrollContent(-this.currentIndex * this.totalWidth);
        // 3.添加定时器
        this.startTimer();
      }
    }
	}
</script>

<style scoped>
  #hy-swiper { overflow: hidden;  position: relative; }
  .swiper {	display: flex; }
  .indicator {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 8px;
  }
  .indi-item {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #fff;
    line-height: 8px;
    text-align: center;
    font-size: 12px;
    margin: 0 5px;
  }
  .indi-item.active {  background-color: rgba(212,62,46,1.0); } //点击圆点切换图片
</style>

SwiperItem.vue

<template>
  <div class="slide"> <slot></slot> </div>
</template>
<script>  export default {  name: "Slide" }	</script>
<style scoped>
  .slide {  width: 100%; flex-shrink: 0;  }
  .slide img {  width: 100%; }
</style>

flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

index.js

import Swiper from './Swiper'
import SwiperItem from './SwiperItem'
export { Swiper, SwiperItem}

HomeSwiper.vue 使用 Swiper, SwiperItem 子组件

<template>
  <swiper>
    <swiper-item v-for="item in banners">
      <a :href="item.link">  <img :src="item.image" alt=""> </a>
    </swiper-item>
  </swiper>
</template>

<script>
  import {Swiper, SwiperItem} from 'components/common/swiper'
  export default {
    name: "HomeSwiper",
    props: { banners: {  type: Array, default() { return [] } } },
    components: {  Swiper,  SwiperItem }
  }
</script>

home.vue 使用 HomeSwiper 组件

<template>
  <div id="home">  <home-swiper :banners="banners"/> </div>
</template>

<script> 
  import HomeSwiper from './childComps/HomeSwiper'
  import {getHomeMultidata} from "network/home";
  export default {
    name: "Home",
    components: {  HomeSwiper, },
    data() { return { banners: []  } },
    created() {
      // 1.请求多个数据
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list;   
      })
    }
  }
</script>