🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
``` 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"); } }); ```