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

用法：**HTML**<divid="app"class="box"v-tap="vuetouch"//vuetouch为函数名，如没有参数，可直接写函数

用法：

**HTML**
<div id="app" class="box" 
 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 }}</div>

**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("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){
 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。

<div v-for="item in items" :key="item.id">
 <!-- 内容 -->
</div>

我的解决方案是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事件之点击、滑动、长按事件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

vue自定义移动端touch事件 vue 长按