手机APP开发中,下拉刷新是一个很常见的功能,但是在网页中,这种模式用的很少。网页下拉刷新,看似简单的功能,但我在网上并没有找到比较好的解决方法,遂自己开发了一个。期间遇到了各种小坑,浏览器兼容,各种浏览器下拉默认事件,PC端无触摸事件~。
清晰的流程认知很重要,接下来简单的说明流程
下拉刷新需要下拉元素与下拉提示元素这里我们选择的容器是body,下拉提示元素自定义~
<body> <div class="refreshing"> <!-- 刷新提示元素 --> </div> </body>
需要注意的是,下拉容器高度不能设置为0,否则不能为容器添加触摸事件
开始之前定义一系列初始数据,
var isValid = false, // 是否生效 isTouching = false, // 触摸中标识 isEfec = false, // 触摸是否生效 isDestory = false, // 是否销毁 startX, startY, disY = 0, // 起始触摸X、y坐标, 移动Y坐标 ...
添加触摸事件
document.body.addEventListener('touchstart', touchStart, false); document.body.addEventListener('touchmove', touchMove, false); document.body.addEventListener('touchend', touchEnd, false);
var touchStart = function(evt) { var scrollTop = parseInt($el.scrollTop()); if(scrollTop > 0) return; // 滚动条高度大于0 if(isDestory) return; // 销毁状态 if(isTouching) return; // 当前处于触摸状态 isTouching = true; // 触摸状态标标识 isEfec = true; // 触摸开始生效 var touch = evt.touches[0], //获取第一个触点 x = parseInt(touch.pageX), //页面触点X坐标 y = parseInt(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; }
这一步唯一需要做的就是记录开始触摸点;
var touchMove = function(evt) { var $loadingEl = $loadingEl, touch = evt.touches[0], //获取第一个触点 x = parseInt(touch.pageX), //页面触点X坐标 y = parseInt(touch.pageY), //页面触点Y坐标 t = y - startY; // 触摸距离 // 距离必须大于灵敏距离触摸才生效 if(!isValid && t > options.startPX) { isValid = true; } // 阻止事件冒泡 evt.preventDefault(); // 省略几行代码 ... disY = t; }
在这一步中需要阻止事件冒泡事件,WAP端的部分浏览器会重写下拉事件,比如chrome与微信中(见下图)。
这里一大坑是:浏览器中下拉默认事件一旦触发后,就不能再通过冒泡阻止此事件。
chrome浏览器中大概是15PX左右的下拉后触发默认刷新,微信中大概是6像素左右。
// touchend事件 var touchEnd = function(evt) { isValid = false; isEfec = false; disY = 0; var $loadingEl = options.$loadingEl, touch = evt.touches[0] || evt.changedTouches[0], //获取第一个触点 y = parseInt(touch.pageY), //页面触点Y坐标 t = y - startY; // Do some thing ... $.post(options.url, sendData, function(response, textStatus, xhr) { // Do something }).error(function(){ // Do something }); }
触摸结束后需要做的是判断是否进行请求数据,请求数据成功后,处理数据,重置有关刷新的代码
简单的说明就到此为止,如果有兴趣,可以从github中下载~
下载地址: https://github.com/pyrinelaw/p-pull-refresh
演示地址: http://pyrinelaw.github.io/p-pull-refresh
Drag介绍文档: http://www.w3schools.com/tags/ev_ondrag.asp
作者: Petrus.Law