vue2.0 v-tap简洁(漏)版 (只解决300ms问题)
Vue.directive('tap',{
bind:function(el,binding){
var startTx, startTy, endTx, endTy, startTime, endTime;
el.addEventListener("touchstart",function(e){
var touch=e.touches[0];
startTx = touch.clientX;
startTy = touch.clientY;
startTime = +new Date()
},false );
el.addEventListener("touchend",function(e){
endTime = +new Date()
if (endTime - startTime > 300) {
// 若点击事件过长,不执行回调
return
}
var touch = e.changedTouches[0];
endTx = touch.clientX;
endTy = touch.clientY;
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6){
// 若点击期间手机移动距离过长,不执行回调
var method = binding.value.method;
var params = binding.value.params;
method(params);
}
},false);
}
})
<div id="test" v-tap="{method:test,params:some}">
var vm= new Vue({
el:"#test",
data:{
some:"ok!"
},
method:{
test:function(ee){
console.log(ee)
}
}
})
vue2.0 v-tap简洁(漏)版 (只解决300ms问题)的更多相关文章
- vue2.0版cnode社区项目搭建及实战开发
_________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue2.0做移动端开发用到的相关插件和经验总结
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- 基于vue2.0+vuex+localStorage开发的本地记事本
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
随机推荐
- php集成开发环境xampp的搭建
一:运维闲谈 作为一名linux运维工程师,在确保能够有熟练的服务器的搭建和维护优化技能的前提,还需对自身解决问题方法上做出一番功夫. 如何为自己的运维工作添砖加瓦,自动化运维便变得非常重要,一方面, ...
- &、|、~与&&、||、! 谬误
按位运算符(&.|.~)的操作是被默认为一个二进制的位序列,分别对其中的每个位进行操作. 逻辑运算符(&&.||.!)将操作数当成非真及假,非假及真.通常就是将0当成假,非0即 ...
- Matplotlib 图表的基本参数设置
1.图名,图例,轴标签,轴边界,轴刻度,轴刻度标签 # 图名,图例,轴标签,轴边界,轴刻度,轴刻度标签等 df = pd.DataFrame(np.random.rand(10,2),columns= ...
- ClassNotFountException 与 NoClassDefineError
一 知识准备 NoClassDefFoundError:正如它们的名字所说明的是一个错误 (Error),而ClassNotFoundException是一个异常.正如上一章节所说Exception和 ...
- WPF仿酷狗页面
原文:WPF仿酷狗页面 版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net/u013981 ...
- 通过Aspose.Word和ZXING生成复杂的WORD表格
1.前言 这是我之前做的一个项目中要求的功能模块,它的需求是生成一个WORD文档,需要每页一个表格并且表格中需要插入文字.条形码和二维码等信息,页数可控制.具体的效果如下图所示: 可以看到有以下几点是 ...
- java中封装的概念
封装(Encapsulation)是类的三大特性之一, 就是将类的状态信息隐藏在类的内部,不允许外部程序直接访问, 而是通过该类提供的方法来实现对隐藏信息的操作和访问. 简而言之,就是隐藏内部实现,提 ...
- mysql一机多实例安装记录
因为想研究mycat,所以需要安装多个mysql实例进行研究.限于没有多于计算机,只能在本机安装了.通过mysql文档,自己琢磨着安装成功! 目录结构如下: 其中one和two文件夹用来模拟数据库分库 ...
- [译]17-spring基于java代码的配置元数据
spring还支持基于java代码的配置元数据.不过这种方式不太常用,但是还有一些人使用.所以还是很有必要介绍一下. spring基于java代码的配置元数据,可以通过@Configuration注解 ...
- 【转载】Unity3D研究院之IOS自定义游戏摇杆与飞机平滑的移动
移动开发游戏中使用到的触摸游戏摇杆在iPhone上是非常普遍的,毕竟是全触摸屏手机,今天MOMO 通过一个小例子和大家讨论Unity3D 中如何自定义一个漂亮的全触摸游戏摇杆. 值得高兴 ...