swiper组件的使用

作者：zccst

swiper使用过程中不断踩坑，有时一个很小的问题，如果自己实现的话会花很长时间，但其实api都有，所以多研究api，网上查一下别人使用过程中遇到的类似问题，就可以大大缩短开发时间。特此记录一下

2，是否能够检测到滑动方向？
可以。使用swiper.touches里的坐标差值来判断
Object {startX: 171, startY: 254, currentX: 198, currentY: 282, diff: 27}

判断逻辑
swiper.isBeginning && (swiper.touches.currentX - swiper.touches.startX) > 0
批注：也找到比较笨的方法，差一点使用了，原理是根据触摸的起始位置判断。

/**
  obj:触发元素；
  dir:期望触发方向；'up','down','left','right'
  fn :触发后的回调函数
*/
var touchEvent = function(obj,dir,fn){
    this.pos = {x:0,y:0};//开始触发位置
    var me = this;
    obj.addEventListener('touchstart',function(event){
        var touch = event.touches[0];
        me.pos.x = touch.pageX;
        me.pos.y = touch.pageY;
    },false);
    obj.addEventListener('touchmove',function(event){
        var touch = event.touches[0];
        me.curtouch = {
            x:touch.pageX,
            y:touch.pageY
        }
    },false);
    obj.addEventListener('touchend',function(event){
        if(me.checkDirV(me.pos,me.curtouch)==dir ||me.checkDirH(me.pos,me.curtouch)==dir){
            (typeof fn=='function')&&fn();
        }
    },false);   
}
touchEvent.prototype = {
    posdiff:100,//触发敏感度
    checkDirV:function(a,b){
        return Math.abs(a.y-this.posdiff)>b.y?(a.y>b.y?'up':'down'):'';
    },
    checkDirH:function(a,b){
        return Math.abs(a.x-this.posdiff)>b.x?(a.x>b.x?'left':'right'):'';
    }
}

1，是否能够向前追加slide(s)时，不跳动（仍显示当期slide）？
答：Yes, you can, just call swipeTo/swipeNext/swipePrev right after slide prepend
链接： https://github.com/nolimits4web/Swiper/issues/276


如果您觉得本文的内容对您的学习有所帮助，您可以微信：