vue自定义移动端touch事件之点击、滑动、长按事件
前端之家收集整理的这篇文章主要介绍了
vue自定义移动端touch事件之点击、滑动、长按事件，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
{{ name }}
js
kim=new Vue({
el:"#app",data:{
name:"开始"
},methods:{
vuetouch:function(s,e){
this.name=s.name;
}
}
});
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。
