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. 关于iOS声音识别的框架

    你好,我现在的项目中需要用到"声纹识别"这方面的需求,以前没做过,请教了.有没有这方面的框架和工具? 关于iOS声音识别的框架 >> ios这个答案描述的挺清楚的:ht ...

  2. 前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程

    由于一个项目中需要用到用户头像上传裁剪组件,这两天便网上找了一些相关插件,主要由以下几种插件: 1.Image Cropper:http://elemefe.github.io/image-cropp ...

  3. iview中 ...用法

    1. 2. 3. 4.可以将divs转为数组解构 5. 解构 6.作为函数的参数 7.作为参数遍历

  4. BZOJ 1176[Balkan2007]Mokia(CDQ分治)

    1176: [Balkan2007]Mokia Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 3381  Solved: 1520[Submit][S ...

  5. python note #1

    To record my process of studying python and to practice my English meanwhile, I'd like to start writ ...

  6. 【Henu ACM Round#18 F】Arthur and Walls

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑,为什么一个连通块里面的空格没有变成一个矩形? 如果不是形成矩形的话. 肯定是因为某个2x2的单张方形里面. 只有一个角是墙.其 ...

  7. Android插件实例——360 DroidPlugin具体解释

    在中国找到钱不难,但你的一个点子不意味着是一个创业.你谈一个再好的想法,比方我今天谈一个创意说,新浪为什么不收购GOOGLE呢?这个创意非常好.新浪一收购GOOGLE.是不是新浪就变成老大了?你从哪儿 ...

  8. 大数据时代的新BI系统架构发展趋势

    商业智能(BI,Business Intelligence).它是一套完整的解决方式,用来将企业中现有的数据进行有效的整合,高速准确的提供报表并提出决策根据.帮助企业做出明智的业务经营决策.     ...

  9. Ubuntu14环境下minigui安装问题记录--object.lo错误

    minigui3.0.12在Ubuntu14上面编译只是去?出现这个错误:object.h:275:9: error: incompatible types when assigning to typ ...

  10. android YUV Sensor配置Camera应用的flash auto菜单

    请在Config.ftbl.flashlight.h (mediatek\custom\common\hal\flashlight\src)中. 将全部的两处凝视掉的code: //CameraPar ...