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

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

发布于 2020-2-24|

复制链接

摘记: 用法：

```javascript

**HTML**

{{ ..

用法：

```javascript

**HTML**

{{ name }}

**js**

kim=new Vue({

el:"#app",

data:{

name:"开始"

},

methods:{

vuetouch:function(s,e){

this.name=s.name;

}

}

});

```

js核心内容

```javascript

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

this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);

};

if(disY2018-03-08

有朋友提出一个bug“v-for循环 生命周期后 获取不到新值 比如更新了数据”这个问题是v-for的就地复用机制导致的，也就是可以复用的dom没有重复渲染，官方给出的方法是需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

```javascript

```

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

```javascript

Vue.directive("tap",{

bind:function(el,binding,vnode){

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

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

}

});

```

最新的版本已经在GitHub更新https://github.com/904790204/vue-touch