javascript - 如何检测拉动刷新

有许多“拉动刷新”插件。我已经测试了其中的5个。但是它们都无法快速运行(尤其是在旧的智能手机上)。

检查拉动刷新的最佳(最佳UX性能和响应性)方法是什么？

PS:我不需要任何动画。我只想识别用户是否“拉动刷新”

最佳答案

性能要求最少的代码

为了解决许多相关问题，必须编写尽可能灵活和通用的插件和库。这意味着它们将始终比您需要的体积更大，从而影响性能。这也意味着您永远不必维护该代码。这就是权衡。

如果性能是您的目标，请自己构建。

由于您只需要一个下拉检测器，因此构建一个简单的滑动检测器。
当然，您必须对此进行调整，以适应您的需求以及目标操作系统和浏览器的事件属性，事件触发。

从我的旧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);