Блог

Главная - Вопросы по программированию - Можно ли обрабатывать жесты свайпа в приложении PWA?

Можно ли обрабатывать жесты свайпа в приложении PWA?

#progressive-web-apps #swipe #gesture

Вопрос:

Я создаю PWA, серверную сторону ASP и клиентскую сторону JS. Пользователи приятно взаимодействуют с ним с помощью кнопок. Босс спросил меня, можем ли мы реализовать что-то вроде «прокрутки между экранами приложений» или «выполнения некоторых операций (редактирование, удаление..) над элементами» с помощью жеста салфетки, как это делают многие собственные приложения. Есть ли простой способ? или как-нибудь иначе? Спасибо!

Ответ №1:

Есть пара библиотек, которые могут помочь реализовать сенсорные жесты для PWA — взгляните на Hammerjs:

https://hammerjs.github.io/

Ваш вопрос довольно общий, хотя, возможно, есть лучшие решения, но это всего лишь одно из моих мыслей

Комментарии:

1. Спасибо, Томас. Это хорошая отправная точка. Я надеялся на что-то более… «прямое», чем >1 тыс. строк кода, но я могу положиться на это. Мой вопрос довольно общий, потому что мои потребности сейчас довольно общие 🙂

Ответ №2:

У вас есть компонент ящика в PWA, который можно смахнуть, чтобы закрыть, используя аналогичный JS, как показано ниже. Сделал пример, который регистрирует направление свайпа / жеста здесь: https://jsfiddle.net/jamiesmith/e9gndqpc/3/

Ниже проверяется функция, вызываемая ignoreSwipe , чтобы мы могли добавить класс ignoreSwipe к некоторым элементам, из которых мы специально хотим игнорировать жесты.

Некоторые стандарты ниже используют:

Событие прикосновения.прикосновения — https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches

TouchEvent.сенсорное начало и сенсорное перемещение — https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

 let _xDown, _yDown;

document.querySelector('div.app')
    .addEventListener(
        'touchstart',
        handleTouchStart,
        false
    );
document.querySelector('div.app')
    .addEventListener(
        'touchmove',
        handleTouchMove,
        false
    );


function ignoreSwipe(event) {
    // if some touches come from elements with ignoreswipe class > ignore
    return Array.from(event.touches).some((t) =>
        t.target.classList.contains('noswipe')
    );
}

function handleTouchStart(event) {
    if (ignoreSwipe(event)) {
        _xDown = undefined;
        _yDown = undefined;
        return;
    }

    const firstTouch = event.touches[0];
    _xDown = firstTouch.clientX;
    _yDown = firstTouch.clientY;
}

function handleTouchMove(event) {

    if (!_xDown || !_yDown) {
        return;
    }

    const xUp = event.touches[0].clientX;
    const yUp = event.touches[0].clientY;

    const xDiff = _xDown - xUp;
    const yDiff = _yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
        /*most significant*/
        if (xDiff > 0) {
            /* left swipe */
            console.log('app: left swipe ', true);
        } else {
            /* right swipe */
            console.log('app: right swipe ', true);
        }
    } else {
        if (yDiff > 0) {
            /* up swipe */
            console.log('app: up swipe ', true);
        } else {
            /* down swipe */
            console.log('app: down swipe ', true);
        }
    }

    /* reset values */
    _xDown = null;
    _yDown = null;
}
Метки: