手机APP开发中，下拉刷新是一个很常见的功能，但是在网页中，这种模式用的很少。网页下拉刷新，看似简单的功能，但我在网上并没有找到比较好的解决方法，遂自己开发了一个。期间遇到了各种小坑，浏览器兼容，各种浏览器下拉默认事件，PC端无触摸事件~。
简单的效果图
下拉刷新效果图
下拉刷新实现流程
- 定义初始数据
- 触摸开始
- 触摸移动过程中判断是否处于下拉状态，标记开始状态
- 触摸过程中控制提示内容 margin-top与 height 属性予以呈现
- 触摸结束，请求数据
- 请求数据成功/失败处理
- 处理数据，下拉刷新完成
清晰的流程认知很重要，接下来简单的说明流程
静态样式
下拉刷新需要下拉元素与下拉提示元素
这里我们选择的容器是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浏览器默认下拉刷新
微信中默认下拉显示网页信息
这里一大坑是：浏览器中下拉默认事件一旦触发后，就不能再通过冒泡阻止此事件。
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
网友评论