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的触摸事 ...
随机推荐
- Caused by: java.lang.NullPointerException: Location is required
将 Parent root = FXMLLoader.load(getClass().getResource("xml/MainUI.fxml")); 改为: Parent roo ...
- ubuntu安装mysql遇到的坑----解决Mysql报错缺少libaio.so.1
最近学习大数据,涉及到hive的部分需要安装mysql,于是就在linux环境下尝试安装,对于我这个linux小白来说,中间遇到很多坑爹问题,在这里做一个记录. 我参考的mysql安装博客: http ...
- 史上最浅显易懂的RxJava入门教程
RxJava是一个神奇的框架,用法很简单,但内部实现有点复杂,代码逻辑有点绕.我读源码时,确实有点似懂非懂的感觉.网上关于RxJava源码分析的文章,源码贴了一大堆,代码逻辑绕来绕去的,让人看得云里雾 ...
- PHP强制在微信中打开
if (!Func::isWx()) { exit('请在微信客户端打开链接'); } // 判断是否是微信 public static function isWx() { if ( strpos($ ...
- C++ 中 static 与 const 的用法及对比
在这个学习过程中我对 static 及 const 的使用时常会混淆,因此整理,加深记忆 一.类的静态成员 如果某个属性为整个类所共有,不属于任何一个具体对象,则采用 static 关键字来声明静态成 ...
- Linux基础-01-Linux基础命令
1. Linux命令的格式 1) Linux命令的语法格式: 命令 [选项] [参数] 2) 命令格式中命令.选项.参数的具体含义 a) 命令:告诉Linux(UNIX)操作系统做(执行)什么. b) ...
- centos 安装notepad++
notepad++在linux下名字为notepadqq第一步,还是下载软件库$ sudo wget -O /etc/yum.repos.d/sea-devel.repo http://sea.fed ...
- Python Threading 线程/互斥锁/死锁/GIL锁
导入线程包 import threading 准备函数线程,传参数 t1 = threading.Thread(target=func,args=(args,)) 类继承线程,创建线程对象 class ...
- Spring Boot 集成 Swagger生成接口文档
目的: Swagger是什么 Swagger的优点 Swagger的使用 Swagger是什么 官网(https://swagger.io/) Swagger 是一个规范和完整的框架,用于生成.描述. ...
- Python3标准库使用样例
原:https://doughellmann.com/blog/the-python-3-standard-library-by-example/the-python-3-standard-libra ...