// 判断上下滑动
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触摸事件-判断上下滑动的更多相关文章

  1. H5 触摸事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  3. Android触摸事件

    简单介绍: 做了一个语音发送UI的小demo. 按下显示语音窗体,依据音量调节UI音量显示,上划至窗体显示取消发送. 原理: 1:获取什么事件来运行操作: 给Button加入setOnTouchLis ...

  4. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  5. 移动端touch触摸事件(滑动效果和手势操作)

    一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...

  6. cocos creator 的scorllview 滑动事件和 子内容触摸事件会产生冲突

    1:问题描叙: UI上的 scorllview 的子元素需要拖动到游戏场景.所以子元素需要绑定触摸事件,scorllview 默认的事件处理方式就会和子元素的触摸事件冲突.2:解决方案: Scroll ...

  7. 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  8. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  9. iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

    -- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...

随机推荐

  1. Mui manifest.json文档说明

    Mui官方地址:https://ask.dcloud.net.cn/article/94 保存在这里,太难找了!!!!!! 以下是完整的manifest.json配置文件,在HBuilder|HBui ...

  2. docker 搭建私有 docker hub

    查找registry 镜像 meiya@meiya:/etc/docker$ clear meiya@meiya:/etc/docker$ docker search registry NAME DE ...

  3. mysql查看正在运行的语句

    mysql查看正在运行的语句 并且查看运行最多的mysql语句 MySQL 打开 general log 后,所有的查询语句都会记录在 general log 文件,文件为只读方式,但这样genera ...

  4. DVWA 安全测试靶机本地搭建

    前期的搭建步骤这里就不多做表述了,网上文章很多,这里主要讲后续会遇到的问题和需要修改的地方.   首先将config-inc.php.dist  修改为config-inc.php 设置Key值 $_ ...

  5. GWAS中的名称概念

    基因: 是指决定生物某一遗传性状的染色体DNA片段 基因型: `基因型`又称`遗传型`,是某一生物个体全部基因组合的总称.它反应生物体的遗传构成,即从双亲获得的全部基因的总和.遗传学中具体使用的基因型 ...

  6. LeetCode 459. 重复的子字符串(Repeated Substring Pattern)

    459. 重复的子字符串 459. Repeated Substring Pattern 题目描述 给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成.给定的字符串只含有小写英文字母,并且 ...

  7. LeetCode 112. 路径总和(Path Sum) 10

    112. 路径总和 112. Path Sum 题目描述 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节 ...

  8. Anaconda中安装了Libtiff模块,但运行程序显示ModuleNotFoundError: No module named 'libtiff'

    出现问题:Anaconda中已经用[conda install libtiff]命令安装了libtiff,并且利用命令[conda list]发现libtiff确实存在,但在pip中却不存在[pip ...

  9. Android studio 3.1.3真机调试报错,no target device found

    Android studio 3.1.2 的 Android monitor 改为 Android profiler,直接点这个就可以真机调试,在手机安装相应app 如果不行,报错,"no ...

  10. C#6.0的新语法特性

    https://www.cnblogs.com/dotnet261010/p/9147707.html https://www.cnblogs.com/wangdodo/p/7929050.html