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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
node.js实现快速截图
Aug 27 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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代码
2013/03/24 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
javascript jq 弹出层实例
2013/08/25 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python自动生成model文件过程详解
2019/11/02 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
如何使用python写截屏小工具
2020/09/29 Python
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
中学生操行评语大全
2014/04/24 职场文书
社区清明节活动总结
2014/07/04 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
民主评议党员个人总结
2015/02/13 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
结婚仪式主持词
2015/06/29 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server