vue自定义移动端touch事件之点击、滑动、长按事件

vue自定义移动端touch事件之点击、滑动、长按事件

用法：

**HTML**

v-tap="vuetouch" //vuetouch为函数名，如没有参数，可直接写函数名

v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传，fn 为函数名

v-swipeleft="{fn:vuetouch,name:'左滑'}"

v-swiperight="{fn:vuetouch,name:'右滑'}"

v-swipeup="{fn:vuetouch,name:'上滑'}"

v-swipedown="{fn:vuetouch,name:'下滑'}"

>{{ name }}

**js**

kim=new Vue({

el:"#app",

data:{

name:"开始"

},

methods:{

vuetouch:function(s,e){

this.name=s.name;

}

}

});

js核心内容

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.longTouch=true;

this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;

this.obj.addEventListener("xIRTOotouchstart",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){

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){

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){

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){

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");

}

});

2018-03-08

有朋友提出一个bug

“v-for循环 生命周期后 获取不到新值 比如更新了数据”

这个问题是v-for的就地复用机制导致的，也就是可以复用的dom没有重复渲染，官方给出的方法是需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

我的解决方案是directive的钩子函数参数有一个vnode，这个是虚拟dom节点，给vnode.key赋予一个随机id，强制dom刷新。

Vue.directive("tap",{

bind:function(el,binding,vnode){

vnode.key = randomString()//randomString会返回一个随机字符串

new vueTouch(el,binding,"tap");

}

});

最新的版本已经在github更新

https://github.com/904790204/vue-touch

总结

以上所述是给大家介绍的vue自定义移动端touch事件之点击、滑动、长按事件，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。