SoFunction
Updated on 2025-04-05

vue custom mobile touch event click, slide, long press event

usage:

**HTML**
<div  class="box" 
  v-tap="vuetouch" //vuetouch is the function name. If there are no parameters, you can write the function name directly  v-longtap="{fn:vuetouch,name:'Long press'}" //If there are parameters passed in object form, fn is the function name  v-swipeleft="{fn:vuetouch,name:'Swipe left'}"
  v-swiperight="{fn:vuetouch,name:'Swipe right'}"
  v-swipeup="{fn:vuetouch,name:'Slide up'}"
  v-swipedown="{fn:vuetouch,name:'Slide'}"
>{{ name }}</div>

**js**
kim=new Vue({
  el:"#app",
  data:{
    name:"start"
  },
  methods:{
    vuetouch:function(s,e){
      =;
    }
  }
});

js core content

function vueTouch(el,binding,type){
  var _this=this;
  =el;
  =binding;
  =type;
  ={x:0,y:0};
  =true;
  =true;
  =true;
  =typeof()=="object"?:;
  ("touchstart",function(e){
    _this.start(e);
  },false);
  ("touchend",function(e){
    _this.end(e);
  },false);
  ("touchmove",function(e){
    _this.move(e);
  },false);
};
={
  start:function(e){
    =true;
    =true;
    =true;
    ={x:[0].pageX,y:[0].pageY};
    =setTimeout(function(){
      if(&&){
        =="longtap"&&(,e);
        =false;
      };
    }.bind(this),1000);
  },
  end:function(e){
    var disX=[0].;
    var disY=[0].;
    clearTimeout();
    if((disX)>10||(disY)>100){
      =="swipe"&&(,e);
      if((disX)>(disY)){
        if(disX>10){
          =="swiperight"&&(,e);
        };
        if(disX<-10){
          =="swipeleft"&&(,e);
        };
      }else{
        if(disY>10){
          =="swipedown"&&(,e);
        };
        if(disY<-10){
          =="swipeup"&&(,e);
        }; 
      };
    }else{
      if(&&){
        =="tap"&&(,e);
        =false
      };
    };
  },
  move:function(e){
    =false;
  }
};
("tap",{
  bind:function(el,binding){
    new vueTouch(el,binding,"tap");
  }
});
("swipe",{
  bind:function(el,binding){
    new vueTouch(el,binding,"swipe");
  }
});
("swipeleft",{
  bind:function(el,binding){
    new vueTouch(el,binding,"swipeleft");
  }
});
("swiperight",{
  bind:function(el,binding){
    new vueTouch(el,binding,"swiperight");
  }
});
("swipedown",{
  bind:function(el,binding){
    new vueTouch(el,binding,"swipedown");
  }
});
("swipeup",{
  bind:function(el,binding){
    new vueTouch(el,binding,"swipeup");
  }
});
("longtap",{
  bind:function(el,binding){
    new vueTouch(el,binding,"longtap");
  }
});

2018-03-08

A friend raised a bug

"After the life cycle of the v-for loop, no new value can be obtained, such as updated data"

This problem is caused by the in-place reuse mechanism of v-for, that is, the reusable dom does not render repeatedly. The official method is to provide a unique key attribute for each item. The ideal key value is the unique id for each item.

&lt;div v-for="item in items" :key=""&gt;
 &lt;!-- content --&gt;
&lt;/div&gt;

My solution is that the directive hook function parameter has a vnode, which is a virtual dom node, which gives a random id and forces the dom to refresh.

("tap",{
  bind:function(el,binding,vnode){
     = randomString()//randomString will return a random string    new vueTouch(el,binding,"tap");
  }
});

The latest version has been updated on GitHub

/904790204/vue-touch

Summarize

The above is the click, swipe, and long press event of the vue custom mobile touch event introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!