vue自定义移动端touch事件之点击、滑动、长按事件
发布时间：2020-12-17 03:08:46 所属栏目：百科 来源：网络整理
导读：用法： {{ 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(di
用法：{{ name }}
js 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刷新。 最新的版本已经在GitHub更新
总结以上所述是小编给大家介绍的vue自定义移动端touch事件之点击、滑动、长按事件。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |