插件-模仿滑动动作事件

Posted 2020-10-03 寒玉知

前端页面经常用到滑动事件，即判断是动作左滑、右滑、上滑或者下滑，然后根据事件类型完成不同的功能，最常见的就是H5的翻页，如果需要的事件很简单，就是判断一下滑动方向然后执行回调函数，那么如果引用较大的插件将会十分影响页面的加载速度。

下面就分享一个简单的滑动事件的插件，轻量好用。

直接贴代码

var TouchTool = function(param) {
    var self = this;
    this.dh = document.documentElement.clientHeight;
    this.direction = param.direction || ‘vertical‘;
    this.device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
    this.sx = this.sy = this.ex = this.ey = this.mx = this.my = this.speedx = this.speedy = this.st = this.et = 0;
    this.obj = param.obj;
    this.len = this.obj.length;
    this.startEvtName = this.device ? "touchstart" : "mousedown";
    this.moveEvtName = this.device ? "touchmove" : "mousemove";
    this.endEvtName = this.device ? "touchend" : "mouseup";
    console.log(this.obj)
    this.touchStart = function(e) {
        var e = e || event;
        self.st = new Date().getTime();
        self.sx = self.device ? e.touches[0].clientX : e.clientX;
        self.sy = self.device ? e.touches[0].clientY : e.clientY;

        self.obj.addEventListener(self.moveEvtName, self.touchMove);
        self.obj.addEventListener(self.endEvtName, self.touchEnd);
    }
    this.touchMove = function(e) {
        var e = e || event;
        self.ex = self.device ? e.touches[0].clientX : e.clientX;
        self.ey = self.device ? e.touches[0].clientY : e.clientY;
    }
    this.touchEnd = function(e) {
        var e = e || event;
        self.et = new Date().getTime();
        self.obj.removeEventListener(self.moveEvtName, self.touchMove);
        self.obj.removeEventListener(self.endEvtName, self.touchEnd);

        self.ex = self.ex;
        self.ey = self.ey;

        self.mx = self.ex - self.sx;
        self.my = self.ey - self.sy;
        self.speedx = Math.abs(self.mx / (self.et - self.st));
        self.speedy = Math.abs(self.my / (self.et - self.st));

        if(self.direction == ‘horizontal‘) {
            if((self.speedx > 1 || (self.speedx > 0.5 && Math.abs(self.mx) > 250)) && self.mx > 0) {
                if(typeof param.slideRight != ‘undefined‘) {
                    param.slideRight();
                }
            };
            if((self.speedx > 1 || (self.speedx > 0.5 && Math.abs(self.mx) > 250)) && self.mx < 0) {
                if(typeof param.slideLeft != ‘undefined‘) {
                    param.slideLeft();
                }
            };
        }

        if(self.direction == ‘vertical‘) {
            if((self.speedy > 1 || (self.speedy > 0.5 && Math.abs(self.my) > 300)) && self.my > 0) {
                if(typeof param.slideDown != ‘undefined‘) {
                    param.slideDown();
                }
            };
            if((self.speedy > 1 || (self.speedy > 0.5 && Math.abs(self.my) > 300)) && self.my < 0) {
                if(typeof param.slideUp != ‘undefined‘) {
                    param.slideUp();
                }
            }
        }
    }

    this.obj.addEventListener(this.startEvtName, this.touchStart);
}

使用方法：

new TouchTool({
    ‘obj‘: document.getElementById(‘touchBox‘),
    ‘direction‘: ‘vertical‘, //horizontal水平 vertical垂直
    ‘slideUp‘: function() {
        console.log(‘u‘)
    },
    ‘slideDown‘: function() {
        console.log(‘d‘)
    },
    ‘slideLeft‘: function() {
        console.log(‘l‘)
    },
    ‘slideRight‘: function() {
        console.log(‘r‘)
    }
})

在配置参数里填入要执行的回调函数，就可以使用了，PC端和移动端都适用，很简单有木有

 

（完）