vue swiper设置loop:true与倒计时结合使用

前言

最近项目需要实现一个营销功能，需求是在首页banner处轮播展示即将开展的活动图并显示活动开始倒计时。

说明

swiper设置loop: true时，即开启循环模式，slides前后会复制若干个slide，从而形成一个环路，但是不会复制绑定在dom上的click事件，也不会复制定时器事件，因此使用了swiper的slideChangeTransitionEnd事件解决。

slideChangeTransitionEnd：回调函数，swiper从一个slide过渡到另一个slide结束时执行。

 代码如下：

github地址：https://github.com/lhz333/swiper_countDown

<template>
  <div class="hello">
    <h3>swiper中使用倒计时</h3>
    <swiper ref="swiper" class="swiper" :options="swiperOption">
      <swiper-slide v-for="(item, index) in arr" :key="index">
        <count-down :endDate="item.endDate"></count-down>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import CountDown from './CountDown'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'HelloWorld',
  data () {
    return {
      arr: [{
        endDate: Date.parse(new Date()) + 100000000
      }, {
        endDate: Date.parse(new Date()) + 1000000000
      }, {
        endDate: Date.parse(new Date()) + 2000000000
      }],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        loop: true,
        observer: true,
        observeParents: true,
        preventLinksPropagation: true,
        paginationClickable: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        on: {
          // 回调函数，swiper从一个slide过渡到另一个slide结束时执行。
          slideChangeTransitionEnd () {
            // 在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex
            this.slideToLoop(this.realIndex, 0, false)
          }
        }
      }
    }
  },
  components: {
    CountDown,
    swiper,
    swiperSlide
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.swiper {
  position: relative;
}
.swiper .swiper-slide {
  height: 50px;
  line-height: 50px;
}
.swiper.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}
</style>

 倒计时组件：

<template>
  <div class="count-down">{{countDownTime}}</div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      countDownNum: 0,
      timer: null
    }
  },
  components: {},
  props: {
    endDate: {
      type: Number
    }
  },
  computed: {
    countDownTime () {
      return this.getCountdownString(this.countDownNum)
    }
  },
  methods: {
    countTime () {
      this.countDownNum = this.getCountdownTime(); //获取倒计时初始值
      if (this.countDownNum <= 0) {
        clearInterval(this.timer);
        return;
      }
      this.timer = setInterval(() => {
        this.countDownNum -= 1000;
        if (this.countDownNum <= 0) {
          clearInterval(this.timer);
        }
      }, 1000)
    },

    getCountdownString (time) {
      if (time <= 0) return ''
      var d = Math.floor(time / 1000 / 60 / 60 / 24);
      var h = Math.floor(time / 1000 / 60 / 60 % 24);
      var m = Math.floor(time / 1000 / 60 % 60);
      var s = Math.floor(time / 1000 % 60);
      d = d < 10 ? `0${d}` : d;
      s = s < 10 ? `0${s}` : s;
      m = m < 10 ? `0${m}` : m;
      h = h < 10 ? `0${h}` : h;
      var string = `${h}时${m}分${s}秒`;
      if (d > 0) {
        string = `${d}天${string}`;
      }
      return string;
    },

    getCountdownTime () {
      var time = this.endDate - this.getNowTimeStamp();
      return time;
    },

    getNowTimeStamp () {
      var timestamp = Date.parse(new Date());
      return timestamp;
    }
  },
  created () {

  },
  mounted () {
    // this.countTime()
  },
  deactivated () {
    clearInterval(this.timer);
  },
  beforeDestroy () {
    clearInterval(this.timer);
  },
  watch: {
    endDate: {
      deep: true,
      immediate: true,
      handler () {
        clearInterval(this.timer);
        this.countTime()
      }
    }
  }
}
</script>

<style scoped>
.count-down {
  font-size: 14px;
}
</style>

完。