vue中自定义触屏事件,点击 滑动 左滑 右滑 下滑 上滑 长按

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站 主要思路为,首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置,然后监听touchend与touchmove事件这样可以获取用户触屏结束后的位置,这样就可以计算出用户在屏幕上滑动的方向。最后通过vue的自定义事件,将事件注册为全局的事件。、这样整个页面都可以使用触屏事件了。

具体的代码为

function vueTouch(el,binding,type){//触屏函数    var _this=this;    this.obj=el;    this.binding=binding;    this.touchType=type;    this.vueTouches={x:0,y:0};//触屏坐标    this.vueMoves=true;    this.vueLeave=true;    this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;    this.obj.addEventListener("touchstart",function(e){        _this.start(e);    },false);    this.obj.addEventListener("touchend",function(e){        _this.end(e);    },false);    this.obj.addEventListener("touchmove",function(e){        _this.move(e);    },false);};vueTouch.prototype={    start:function(e){//监听touchstart事件        this.vueMoves=true;        this.vueLeave=true;        this.longTouch=true;        this.vueTouches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY};        this.time=setTimeout(function(){            if(this.vueLeave&&this.vueMoves){                this.touchType=="longtap"&&this.vueCallBack(this.binding.value,e);                this.longTouch=false;            };        }.bind(this),1000);    },    end:function(e){//监听touchend事件        var disX=e.changedTouches[0].pageX-this.vueTouches.x;//计算移动的位移差        var disY=e.changedTouches[0].pageY-this.vueTouches.y;        clearTimeout(this.time);        if(Math.abs(disX)>10||Math.abs(disY)>100){//当横向位移大于10,纵向位移大于100,则判定为滑动事件            this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);//若为滑动事件则返回            if(Math.abs(disX)>Math.abs(disY)){//判断是横向滑动还是纵向滑动                if(disX>10){                    this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);//右滑                };                if(disX<-10){                    this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);//左滑                };            }else{                if(disY>10){                    this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);//下滑                };                if(disY<-10){                    this.touchType=="swipeup"&&this.vueCallBack(this.binding.value,e);//上滑                };              };        }else{            if(this.longTouch&&this.vueMoves){                this.touchType=="tap"&&this.vueCallBack(this.binding.value,e);                this.vueLeave=false            };        };    },    move:function(e){//监听touchmove事件        this.vueMoves=false;    }};Vue.directive("tap",{//点击事件    bind:function(el,binding){        new vueTouch(el,binding,"tap");    }});Vue.directive("swipe",{//滑动事件    bind:function(el,binding){        new vueTouch(el,binding,"swipe");    }});Vue.directive("swipeleft",{//左滑事件    bind:function(el,binding){        new vueTouch(el,binding,"swipeleft");    }});Vue.directive("swiperight",{//右滑事件    bind:function(el,binding){        new vueTouch(el,binding,"swiperight");    }});Vue.directive("swipedown",{//下滑事件    bind:function(el,binding){        new vueTouch(el,binding,"swipedown");    }});Vue.directive("swipeup",{//上滑事件    bind:function(el,binding){        new vueTouch(el,binding,"swipeup");    }});Vue.directive("longtap",{//长按事件    bind:function(el,binding){        new vueTouch(el,binding,"longtap");    }});

将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。

示例(以下滑事件为例):

<div @swipedown="swipe(x)">00</div>

点这里可以跳转到人工智能网站

发表评论