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 本 ...
随机推荐
- Python面向对象--高级(一)
## 属性的类型 - 属性可分为类属性和实例属性 - 实例属性可以通过在类中使用self定义,或者直接在类外部使用实例变量定义 class Person(object): def __init__(s ...
- 特殊sql查询方法实例
一.if条件查询:SELECT sum(if(is_buy > 0 ,1,0)) AS friend_count_all_cj, sum(if(is_buy = 0 ,1,0)) AS frie ...
- attention发展历史及其相应论文
这个论文讲述了attention机制的发展历史以及在发展过程的变体-注意力机制(Attention Mechanism)在自然语言处理中的应用 上面那个论文提到attention在CNN中应用,有一个 ...
- ERROR 1005 (HY000): Can't create table 'students.#sql-d9
今天在创建外键的时候出现以下错误 ERROR 1005 (HY000): Can't create table 'students.#sql-d99_3' (errno: 150) 格式 ...
- 笔记-python-redis接口
笔记-python-redis接口 1. python 与redis接口 redis是redis数据库的python接口包,为python提供的redis的调用接口. 注:文档内容主要基于h ...
- mysql学习第三天练习(日期和时间函数)
-- 日期和时间函数 -- 获取当前日期 select curdate(),current_date() from dual -- 返回服务器当前的日期和时间 select NOW(),SYSDATE ...
- 如何在react里嵌入iframe?
无法访问iframe地址 index.js文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from ...
- luogu3317 [SDOI2014]重建
原来矩阵树定理对于边是概率的情况也是适用的qwqwq. ref #include <iostream> #include <cstdio> #include <cmath ...
- 22、(转载)jQueryMobile 知识点总结
本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准 ...
- 【情人节礼物】纯js脚本打造精美3D玫瑰
情人节就要来临了,这是用代码做出的玫瑰花,这才是程序员送给女友的最好情人节礼物...(提示:在不同浏览器下观看效果.速度会有很大的不同) 代码如下: <!doctype html> < ...