如何检测Pull刷新

Question

有许多"拉动刷新"插件.我已经测试了其中的5个.但它们都没有快速运行(特别是在旧智能手机上).

什么是检查拉动刷新的最佳(黄油用户体验性能和响应性)方法？

PS:我不需要任何动画.我只是想知道用户是否"拉动刷新"

Answer 1

性能需要最少的代码

为了解决许多相关问题,必须编写插件和库以尽可能灵活和通用.这意味着它们总是比您需要的更笨重,从而影响性能.这也意味着您永远不必维护该代码.这是权衡.

如果性能是您的目标,请自行构建.

由于您需要的只是下拉检测,因此请构建一个简单的滑动检测器.当然,您必须根据自己的需求以及您要定位的操作系统和浏览器的事件属性,事件触发器进行调整.

从我的旧js-minimal-swipe-detect简化而来

var pStart = {x: 0, y:0};
var pStop = {x:0, y:0};

function swipeStart(e) {
    if (typeof e['targetTouches'] !== "undefined"){
        var touch = e.targetTouches[0];
        pStart.x = touch.screenX;
        pStart.y = touch.screenY;
    } else {
        pStart.x = e.screenX;
        pStart.y = e.screenY;
    }
}

function swipeEnd(e){
    if (typeof e['changedTouches'] !== "undefined"){
        var touch = e.changedTouches[0];
        pStop.x = touch.screenX;
        pStop.y = touch.screenY;
    } else {
        pStop.x = e.screenX;
        pStop.y = e.screenY;
    }

    swipeCheck();
}

function swipeCheck(){
    var changeY = pStart.y - pStop.y;
    var changeX = pStart.x - pStop.x;
    if (isPullDown(changeY, changeX) ) {
        alert('Swipe Down!');
    }
}

function isPullDown(dY, dX) {
    // methods of checking slope, length, direction of line created by swipe action 
    return dY < 0 && (
        (Math.abs(dX) <= 100 && Math.abs(dY) >= 300)
        || (Math.abs(dX)/Math.abs(dY) <= 0.3 && dY >= 60)
    );
}

document.addEventListener('touchstart', function(e){ swipeStart(e); }, false);
document.addEventListener('touchend', function(e){ swipeEnd(e); }, false);