Как обнаружить Pull to refresh

Есть много плагинов, которые нужно вытащить для обновления. Я уже протестировал 5 из них. Но ни один из них не работает быстро (особенно на старых смартфонах).

Какова лучшая (масляная производительность и отзывчивость UX), чтобы проверить, хотите ли вы обновить?

PS: Мне не нужна анимация. Я просто хочу узнать, если пользователь "тянет, чтобы обновить"

Ответ 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);

Ответ 2

Вы устали от этих решений? Вам нужно проверить этот fiddle

var mouseY = 0;
var startMouseY = 0;
$('body').on('mousedown', function (ev) {
    mouseY = ev.pageY;
    startMouseY = mouseY;
    $(document).mousemove(function (e) {
        if (e.pageY > mouseY) {
            var d = e.pageY - startMouseY;
            console.log("d: " + d);
            if (d >= 200)
                location.reload();
            $('body').css('margin-top', d/4 + 'px');
        }
        else
            $(document).unbind("mousemove");


    });
});
$('body').on('mouseup', function () {
    $('body').css('margin-top', '0px');
    $(document).unbind("mousemove");
});
$('body').on('mouseleave', function () {
    $('body').css('margin-top', '0px');
    $(document).unbind("mousemove");
});

и если вы ищете какой-то плагин этот плагин может помочь вам

Ответ 3

Как насчет этого?

var lastScrollPosition = 0;
window.onscroll = function(event)
{
  if((document.body.scrollTop >= 0) && (lastScrollPosition < 0))
  {
    alert("refresh");
  }
  lastScrollPosition = document.body.scrollTop;
}

Если в вашем браузере нет отрицательной прокрутки, вы можете заменить строку 4 чем-то вроде этого: if((document.body.scrollTop == 0) && (lastScrollPosition > 0))

В качестве альтернативы для устройств Android вы можете поменять lastScrollPosition на "ontouchmove" или другие события жестов.

Ответ 4

Один простой способ:

$(document.body).pullToRefresh(function() {
         setTimeout(function() {
            $(document.body).pullToRefreshDone();
         }, 2000);
      });