来一发，网页下拉刷新

时间 2019-11-19

标签一发网页下拉刷新栏目 HTML 繁體版

原文原文链接

手机APP开发中，下拉刷新是一个很常见的功能，可是在网页中，这种模式用的不多。网页下拉刷新，看似简单的功能，但我在网上并无找到比较好的解决方法，遂本身开发了一个。期间遇到了各类小坑，浏览器兼容，各类浏览器下拉默认事件，PC端无触摸事件~。javascript

简单的效果图

下拉刷新实现流程

定义初始数据
触摸开始
触摸移动过程当中判断是否处于下拉状态，标记开始状态
触摸过程当中控制提示内容 margin-top与 height 属性予以呈现
触摸结束，请求数据
请求数据成功/失败处理
处理数据，下拉刷新完成

清晰的流程认知很重要，接下来简单的说明流程html

静态样式

下拉刷新须要下拉元素与下拉提示元素
这里咱们选择的容器是body,下拉提示元素自定义~java

<body>
     <div class="refreshing">
             <!-- 刷新提示元素 -->
     </div>
</body>

须要注意的是，下拉容器高度不能设置为0，不然不能为容器添加触摸事件git

定义初始数据

开始以前定义一系列初始数据,github

var isValid = false,    // 是否生效
    isTouching = false, // 触摸中标识
    isEfec = false, // 触摸是否生效
    isDestory = false,  // 是否销毁 
    startX, startY, disY = 0,   // 起始触摸X、y坐标， 移动Y坐标
    ...

添加触摸事件chrome

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像素左右。post

触摸结束，请求数据

// 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
    });
}

触摸结束后须要作的是判断是否进行请求数据，
请求数据成功后，处理数据，重置有关刷新的代码url

简单的说明就到此为止，若是有兴趣，能够从github中下载~