是否可以在 PWA 应用程序中处理滑动手势？

Question

我正在创建一个 PWA、ASP 服务器端和 JS 客户端。 用户使用按钮与它很好地交互。 老板问我是否可以像许多本机应用程序那样使用滑动手势实现诸如“在应用程序屏幕之间滚动”或“对元素执行某些操作（编辑、删除..）”之类的功能。 有简单的方法吗？或者无论如何？ 谢谢！

Answer 1

在这里做一个记录滑动方向的例子：https://jsfiddle.net/jamiesmith/e9gndqpc/3/

下面是从链接示例中提取的代码，控制台记录了滑动的方向（上、下、左或右）。您可以在其中搜索

left swipe

或

up swipe

等，以找到您将在哪里调用某些函数/按方向做某事。

它还会检查一个名为

ignoreSwipe

的函数，因此我们可以将一个名为

ignoreSwipe

的类添加到我们特别想忽略手势的元素中。包含它是因为我发现，尤其是对于 PWA，您可能会监听抽屉组件上的滑动以关闭它，但可能想要忽略来自子元素的滑动，例如菜单项等。

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

该示例使用的一些文档：

TouchEvent.touches - https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches

TouchEvent.touchstart 和 touchmove - https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events

Answer 2

有几个库可以帮助实现 PWA 的触摸手势——看看 Hammerjs：

https://hammerjs.github.io/

你的问题很笼统，可能有更好的解决方案，但这只是我的一个想法