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 相关文章推荐
javascript面向对象编程代码
Dec 19 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
使用layui定义一个模块并使用的例子
Sep 14 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缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python批量图片处理简单示例
2019/08/06 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
新春文艺演出主持词
2014/03/27 职场文书
高中教师评语大全
2014/04/25 职场文书
软件售后服务方案
2014/05/29 职场文书
授权委托书格式
2014/07/31 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery