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的触摸事 ...
 
随机推荐
- 《ucore lab4》实验报告
			
资源 ucore在线实验指导书 我的ucore实验代码 练习1:分配并初始化一个进程控制块 题目 alloc_proc函数(位于kern/process/proc.c中) 负责分配并返回一个新的str ...
 - poj3348(求凸包面积)
			
题目链接:https://vjudge.net/problem/POJ-3348 题意:转换题意后即是求凸包的面积. 思路: 套模板,求凸包面积即转换为多个三角形面积之和,用叉积求,然后除2,因为本题 ...
 - LeetCode 680. 验证回文字符串 Ⅱ(Valid Palindrome II) 1
			
680. 验证回文字符串 Ⅱ 680. Valid Palindrome II 题目描述 给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 每日一算法2019/5/4Day 1Le ...
 - 029 Android 轮播图广告Banner开源框架使用
			
1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...
 - 019 Android 形状可绘制对象(根据要求绘制图片)+图片选择器
			
1.目标效果 绘制颜色渐变的图片 2.实现方法 (1)在app--->res--->drawable 右击drawable文件夹右键,new ---->drawable resour ...
 - python基础学习(十四)
			
28.模块当脚本执行 !!!! 注意 这是分两个文件的 一个是student.py和app3.py student.py name = "Song Ke" name_list ...
 - uwsgi flask gevent 测试代码覆盖率(coverage)
			
目录 可能出现的问题 解决 可能出现的问题 多进程启动 gevent启动 运行的服务可能不会停止 解决 我先参考了一下这一篇文章使用Coverage分析WSGI项目的代码覆盖率,他基本能够解决掉1.2 ...
 - Consul作为SpringCloud配置中心
			
一.背景介绍 在分布式系统中动态配置中,可以避免重复重启服务,动态更改服务参数等.一句话非常重要. 另外一篇文章也是这样说的,哈哈. Consul 作为Spring 推荐的分布式调度系统其也具备配置中 ...
 - springboot + shiro 构建权限模块
			
权限模块基本流程 权限模块的基本流程:用户申请账号和权限 -->登陆认证 -->安全管控模块认证 -->调用具体权限模块(基于角色的权限控制) --> 登陆成功 -->访 ...
 - 转:common.js 常用js公共函数库
			
转自其他博主,自己开发备用 var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data: data, d ...