h5触摸事件-判断上下滑动
// 判断上下滑动
var startX = 0,
startY = 0;
function touchStart(evt){
try{
var touch = evt.touches[0], //获取第一个触点
x = Number(touch.pageX), //页面触点X坐标
y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
}catch(e){
console.log(e.message)
}
} function touchMove(evt){
try{
var touch = evt.touches[0], //获取第一个触点
x = Number(touch.pageX), //页面触点X坐标
y = Number(touch.pageY); //页面触点Y坐标
//判断滑动方向
if (y - startY<0) {
console.log('上滑了!');
var mainView = myApp.addView('.view-main', {domCache: true});
mainView.router.load({pageName: 'friendCircle'});
}
}catch(e){
console.log(e.message);
}
} // function touchEnd(evt){
// try{
// var touch = evt.touches[0], //获取第一个触点
// x = Number(touch.pageX), //页面触点X坐标
// y = Number(touch.pageY); //页面触点Y坐标
// //判断滑动方向
// if (y - startY<0) {
// console.log('上滑了!');
// }
// }catch(e){
// console.log(e.message);
// console.log("end");
// }
// } //绑定事件
function bindEvent(){
document.addEventListener('touchstart',touchStart,false);
document.addEventListener('touchmove',touchMove,false);
// document.addEventListener('touchend',touchEnd,false);
} bindEvent();
参考:http://blog.csdn.net/bbsyi/article/details/52108599
h5触摸事件-判断上下滑动的更多相关文章
- H5 触摸事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- Android触摸事件
简单介绍: 做了一个语音发送UI的小demo. 按下显示语音窗体,依据音量调节UI音量显示,上划至窗体显示取消发送. 原理: 1:获取什么事件来运行操作: 给Button加入setOnTouchLis ...
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 移动端touch触摸事件(滑动效果和手势操作)
一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...
- cocos creator 的scorllview 滑动事件和 子内容触摸事件会产生冲突
1:问题描叙: UI上的 scorllview 的子元素需要拖动到游戏场景.所以子元素需要绑定触摸事件,scorllview 默认的事件处理方式就会和子元素的触摸事件冲突.2:解决方案: Scroll ...
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
- iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控
-- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...
随机推荐
- docker 搭建私有 docker hub
查找registry 镜像 meiya@meiya:/etc/docker$ clear meiya@meiya:/etc/docker$ docker search registry NAME DE ...
- linux CentOS7 安装字体库-转
前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作系统是否有中文字体,在CentOS 7中发现输入命令查看字体列表是提示命令无效: 如上图可以看出,不仅没有中文字体,连字体库 ...
- 在ensp上配置通过Telent登录系统
本实验模拟公司网络场景,路由器R1是公司机房的一台设备,公司员工的办公区 与机房不在同一个楼层,路由器R2和R3模拟员工主机,通过交换机S1与机房设备相 连.为了方便用户的管理,现需要在路由器R1上配 ...
- BGP 实验
一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1. 掌握 BGP 的基本配置方法. 2. 掌握如何查看 BGP 的各种配置信息. 3. 掌握基于回环口的 BGP ...
- PHP,Excel导出换行
// 有id,才算真的有发票数据 if ($v['b_invoice_id']) { $v['b_invoice_info'] = json_decode($v['b_invoice_json'],t ...
- Python调用API接口的几种方式
Python调用API接口的几种方式 相信做过自动化运维的同学都用过API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍py ...
- 面试题目<转载>
1:检测一个变量是否有设置的函数是否?是否为空的函数是?(2分) 2:echo(),print(),print_r()的区别(3分) 3:表单中 get与post提交方法的 ...
- Windows10无法远程连接
1.在桌面计算机上,选择右键->属性.左侧任务列表中选择远程设置(如果桌面没有计算机图标,按键盘+R 输入 control system) 钩上允许 远程连接到此计算机 正常情况下,这样就可以在 ...
- VS.NET(C#)--1.4项目与解决方案
项目与解决方案 项目 除创建网站,VS2005可创建项目.然后把项目放入解决方案中.VS2005可编译很多类型项目,分别是: 1.Windows应用程序 --在用戶计算机上运行的客户端应用程序,可显示 ...
- 使用docker安装gitlab
我这里使用的系统是centos7 首先安装docker,docker-compose(非必须,但是使用它可以简化镜像启动参数),需要注意的是docker-compose安装依赖Python的pip,所 ...