swiper 切换使用& 实时监听

切换的形式多种多样，然而万变不离其宗。在前端开发工作中，我钟爱于使用 swpier ，今天想单独为其写一篇文章，介绍下我的使用心得。

swiper-使用

首先说下我的使用方式。我使用的是 vue 版本通过 npm方式安装 import 方式引入的。

js引入

import { swiper, swiperSlide } from 'vue-awesome-swiper'
  components: {
    swiper,
    swiperSlide,
  }

template 部分

<swiper class="swpier-box"  v-if="swiperOption" :options="swiperOption" ref="mySwiper">    
    <swiper-slide v-for="(item,index) in arys" :key="index">
     <!--内容-->
        <div class="slide-box" 
            :data-swiper-parallax-duration="swiperduration"
            :data-swiper-parallax-y="swiperY"                
            :data-swiper-parallax-opacity="swiperOpacity">
            <component :is="item.component" :run="index===swiperIndex"></component>
            </div>
        </div>
         <!--内容-->
    </swiper-slide>     
</swiper>

这里又一个关键点v-if="swiperOption" 因为我们现在大部分的业务都是异步加载数据，swiper的内容和场景都不是固定的，所以不能一下子就把 它 渲染出来，这里我通过swiperOption 来控制它的加载时机，具体来说就是当我 arys push 完我所需要它展示的场景，在加载 swiper。

实现方案

methods:{
    init(){
        this.swiperOption={
            ....
        }
    }
},
mounted(){
    this.init()
}

这样一个最简单swiper就ok了。

swiper-监听

我觉得它的魅力之所在就是在于监听事件的回调函数了 ，这里我主要用到了touchMove当鼠标或手指在其中拖动时、transitionStart当拖动结束过渡开始时、transitionEnd当过渡结束时。通过它们的配合来监听 swiper 是否在动,具体逻辑思路就是，当 touchMove 时候通过this.getTranslate(), *「注意这里的this指向 swiper不是 vue」*来获取它的位移，当我们主动触发 Move 事件停止时候马上就会触发 transitionStart,而这时候我们就要通过 window.requestAnimationFrame 来开始监听 this.getTranslate() 直到 transitionEnd 结束window.cancelAnimationFrame,而在requestAnimationFrame中我们也可以通过swiper.animating来判断是否还有动画，它是一个布尔值 true/false。

实现代码swiperOption 配置部分

on:{
    touchMove(){
       _vue.swiperY = this.getTranslate()
    },
    transitionStart(){
       _vue.swiperFrame = window.requestAnimationFrame( _vue.swiperRuning);
    },
    transitionEnd(){
        window.cancelAnimationFrame(_vue.swiperFrame)
    }
}

实现代码 vue 部分

methods:{
    ...
    swiperRuning(){
        if(this.swpier.animating){
          this.swiperY = this.swpiers.getTranslate()
          this.swiperFrame = window.requestAnimationFrame(this.swiperRuning)
        }
    }
}

最后 requestAnimationFrame 这个使用 我需要做下兼容处理，代码是我在百度随便搜到的，很好用，下面分享出来

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

关于这个插件的使用就到这里，喜欢的随手一赞