touchstart:  // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 client / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX /screenY:// 触摸点相对于屏幕的位置
identifier: // touch对象的unique ID
http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件:
1.touchstart: // 手指放到屏幕上的时候触发
2.touchmove: // 手指在屏幕上移动的时候触发
3.touchend: // 手指从屏幕上拿起的时候触发
4touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详
属性
1.client / clientY:// 触摸点相对于浏览器窗口viewport的位置
2.pageX / pageY:// 触摸点相对于页面的位置
3.screenX /screenY:// 触摸点相对于屏幕的位置
4.identifier: // touch对象的unique ID
//touchstart事件
function touchSatrtFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = e.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}
//touchmove事件
function touchMoveFunc(e) {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
var text = 'TouchMove事件触发:(' + x + ', ' + y + ')';
//判断滑动方向
if (x - startX != 0) {
//左右滑动
}
if (y - startY != 0) {
//上下滑动
}
}

vue ---- 实现手机端(左滑 删除。右划 正常)的更多相关文章

  1. Android滑动列表(拖拽,左滑删除,右滑完成)功能实现(1)

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

  2. Taro UI开发小程序实现左滑喜欢右滑不喜欢效果

    前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...

  3. Android开发学习之路-PopupWindow和仿QQ左滑删除

    这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...

  4. 基于touch.js 左滑删除功能

    左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. js判断手指的上滑,下滑,左滑,右滑,事件监听

    原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEn ...

  6. 使用zepto实现QQ消息左滑删除效果

    有这样一个需求: 1. 有一个列表,将每一个列表项左滑动出现删除按钮: 2. 右滑动隐藏删除按钮: 3. 点击这个删除按钮删除该列表项. 完成以后的效果: 这是微信网页端的页面,使用的是 zepto ...

  7. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...

  8. 模仿QQ左滑删除

    需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑 布局: <?xm ...

  9. tableView左滑删除功能

    实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...

  10. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

随机推荐

  1. for循环练习-----ATM取款

    要求: 代码: package com.jianglai.atm; import java.util.Scanner; public class ATM { public static void ma ...

  2. 用fcntl锁一个文件来保护操作

    int testfd; /* fd for test*/ if((testfd = open("/usr/local/pgsql/bin/test_fd",O_RDWR|O_CRE ...

  3. GoldenGate 反向切换步骤

    1 事先配置好反向复制链路: 2 停止源端的应用程序; 3 确认源端Capture已捕获所有的Redo信息: GGSCI>info all GGSCI>info ext_app 4 确认源 ...

  4. c#做对比软件

    一些 HTML内容比较/文本差异比较 开源代码 1. DiffPlex - a .NET Diff Generator    http://diffplex.codeplex.com/SourceCo ...

  5. blongsTo 用法

    当存在这样两张表的时候: one{ , 'name':"name" 'sex':"sex" } two{ , 'type':json } 当我们需要在调用到 o ...

  6. bzoj1051 [HAOI2006]受欢迎的牛 tarjan&&缩点

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...

  7. [洛谷P1156][codevs1684]垃圾陷阱

    题目大意:一头奶牛掉进了深度为d的坑里,现在有g个垃圾在特定时刻ti扔进来.奶牛可以吃垃圾以获得体力,吃第i个垃圾能获得mi的体力,也可以堆放垃圾以逃生,第i个垃圾高度为hi.当高度≥d时奶牛成功逃生 ...

  8. Unity Launcher类,轻松打开网页,照片,app 等

    using UnityEngine; using UnityEngine.WSA; public class test : MonoBehaviour { void Start () { //打开百度 ...

  9. OpenGl 坐标转换

    1. OpenGL 渲染管线 OpenGL渲染管线分为两大部分,模型观測变换(ModelView Transformation)和投影变换(Projection Transformation). 做个 ...

  10. HTML——上中下布局

    上中下布局是最主要的布局方式,本比如果用户屏幕分辨率为800*600像素. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font ...