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


Posted in Javascript onJuly 10, 2018

用法:

**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事件之点击、滑动、长按事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 #Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 #Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 #Javascript
ng-alain表单使用方式详解
Jul 10 #Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 #Javascript
React之PureComponent的使用作用
Jul 10 #Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 #Javascript
You might like
PHP中Session的概念
2006/10/09 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php按单词截取字符串的方法
2015/04/07 PHP
php析构函数的简单使用说明
2015/08/24 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
Javascript 写的简单进度条控件
2008/01/22 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
Seajs源码详解分析
2019/04/02 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python实现装饰器、描述符
2018/02/28 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python绘制热力图示例
2019/09/27 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
C#的几个面试问题
2016/05/22 面试题
超级搞笑检讨书
2014/01/15 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
购房协议书
2014/04/11 职场文书
运动会宣传稿50字
2015/07/23 职场文书