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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery map方法使用示例
Apr 23 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
Postman无法正常返回结果问题解决
Aug 28 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作的文本留言本的例子(六)
2006/10/09 PHP
php ci框架验证码实例分析
2013/06/26 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
代码详解django中数据库设置
2019/01/28 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
通知书大全
2015/04/27 职场文书
无保留意见审计报告
2015/06/05 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
浅析Django接口版本控制
2021/06/26 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Python中的tkinter库简单案例详解
2022/01/22 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫