JS-移动端判断上拉和下滑
一、手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。
二、js中距离:pageY、clientY、offsetY的区别:
offsetY:相对于父节点的偏移距离。
clientY:相对于浏览器,滚轮距离不算在内。
pageY:相对于浏览器,滚轮滚动的距离算在内;本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑。
三、touchstart有touches属性,touchend有changedTouches属性,两个属性中分别有pageY、pageX信息。
//滑动处理
var startX, startY;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false); document.addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
alert("无操作");
break;
case 1:
// 向上
alert("up");
break;
case 2:
// 向下
alert("down");
break; default:
}
}, false);
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
//var dx = endX - startX;
var result = 0;
if(dy>0) {//向上滑动
result=1;
}else if(dy<0){//向下滑动
result=2;
}
else
{
result=0;
}
return result;
}
JS-移动端判断上拉和下滑的更多相关文章
- 移动端实现上拉加载更多(使用dropload.js vs js)
做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...
- 使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能
* mescroll请参考官方文档 1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行) 代码如下: var mescroll = new MeS ...
- 移动端 H5 上拉刷新,下拉加载
http://www.mescroll.com/api.html#options 这里有几个重要的设置 1.down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决 2.up 中的 a ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
- js移动端判断上下左右划屏
$(function(){ (function(){ var LSwiperMaker = function(o){ var that = this; this.config = o; this.co ...
- vux-scroller实现移动端上拉加载功能
本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- 自己写的,然后配合zepto+iscroll的上拉加载
/** * Created by jl on 2016/3/28. *///初始化绑定iScroll控件var actHtml="";var myScroll, pullUp ...
- Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向
很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷 ...
随机推荐
- Android手动显示和隐藏软键盘
1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Contex ...
- html5中高德、腾讯、百度 地图api调起手机app
html 部分 <div id="mapBg"> <div class="mapTab"> <a href="" ...
- Android RxJava+Retrofit完美封装
作者简介 本篇来自 小河马 的投稿,分享了自己是如何进行 RxJava+Retrofit 的封装.本文的技术点自然没话说,另外对于这种模块化的思路,希望能帮助到大家.最后提前祝大家周末愉快以及圣诞快乐 ...
- Java类的封装
java中四种不同的限定词限定的成员(成员变量或成员变量方法),访问权限由大到小依次为: public(公共的) 可以被所有的类访问 protected(受保护的) 可以被这个类本身访问 可以被它的子 ...
- B2B 电商业务之 Quote
商品在网店页面上一般会向买家显示价格.对于B2B, 同一商品对不同的买家可能会展示不同的价格.即使如此,买家仍然可以和卖家再协商价格,最终以不同于网店中显示的价格成交.这个协商价格过程就叫Quote, ...
- 对《SQL Server中tempdb的management》的一些更正和补充
对<SQL Server中tempdb的management>的一些更正和补充 前几天看了这篇文章:SQL Server中tempdb的management 发现里面有些内容不是很准确 文 ...
- CentOS6.4 下安装 Apache2.4.16
1.准备工作 1.1.yum安装部分工具 1)yum -y install vim 2)yum -y install wget 3)yum -y install gcc 4)yum -y instal ...
- 新一代 javascript 模板引擎:artTemplate-3.0
特性 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试) 支持运行时调试,可精确定位异常模板所在语句(演示) 对 NodeJS Express 友好支持 安全,默认对 ...
- 【Redis】命令学习笔记——字符串(String)(23个超全字典版)
Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). 本篇基于redis 4.0.11版本,学习字符串( ...
- 转:c# WinForm开发 DataGridView控件的各种操作总结(单元格操作,属性设置)
一.单元格内容的操作 *****// 取得当前单元格内容 Console.WriteLine(DataGridView1.CurrentCell.Value); // 取得当前单元格的列 Index ...