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

前端之家收集整理的这篇文章主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用法

{{ name }}

js
kim=new Vue({
el:"#app",data:{
name:"开始"
},methods:{
vuetouch:function(s,e){
this.name=s.name;
}
}
});

js核心内容

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,"tap"); } }); Vue.directive("swipe","swipe"); } }); Vue.directive("swipeleft","swipeleft"); } }); Vue.directive("swiperight","swiperight"); } }); Vue.directive("swipedown","swipedown"); } }); Vue.directive("swipeup","swipeup"); } }); Vue.directive("longtap","longtap"); } });

2018-03-08

有朋友提出一个bug

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

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

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

随机字符串 new vueTouch(el,"tap"); } });

最新的版本已经在GitHub更新

nofollow" href="https://github.com/904790204/vue-touch">https://github.com/904790204/vue-touch

总结

以上所述是小编给大家介绍的vue自定义移动端touch事件之点击、滑动、长按事件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31576.html

猜你在找的Vue相关文章