如何以编程方式禁用或避免在 iOS 上的 Facebook webview 内运行的网页上关闭手势

Question

我的网页大部分流量来自 Facebook webview。在此页面上，我有边缘到边缘的 Swiper 组件。不幸的是，用户无法向左滑动，因为 webview 具有与关闭 webview 相同的手势。向右滑动效果很好，但向左滑动会关闭视图。它在常规的非 facebook-webview 浏览器（例如移动 Safari）上照常工作。 我尝试在

event.preventDefault()

和

onTouchStart

处理程序、CSS

onTouchMove

中使用

touch-actions: none

但这些都不起作用。此外，Swiper 属性 -

edgeSwipeDetection='prevent'

、

touchStartForcePreventDefault={true}

都没有帮助。

我只想在用户与 Swiper 交互时禁用手势，基本上是在幻灯片上向左滑动手势。

Answer 1

这对我有用，包裹了滑动器组件。我正在使用react-slick滑块，我在slick-slider问题中发现了这个：https://github.com/akiran/react-slick/issues/1240#issuecomment-513235261

let firstClientX, clientX;

const preventTouch = (e) => {
  const minValue = 5; // threshold

  clientX = e.touches[0].clientX - firstClientX;

  // Vertical scrolling does not work when you start swiping horizontally.
  if (Math.abs(clientX) > minValue) {
    e.preventDefault();
    e.returnValue = false;

    return false;
  }
};

const touchStart = (e) => {
  firstClientX = e.touches[0].clientX;
};

/**
 * Prevents closing gestures (e.g. swipe close on Facebook in app browser).
 */
export const PreventCloseGesture = ({ children }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current === null) {
      return;
    }
    containerRef.current.addEventListener('touchstart', touchStart);
    containerRef.current.addEventListener('touchmove', preventTouch, { passive: false });

    return () => {
      if (containerRef.current) {
        containerRef.current.removeEventListener('touchstart', touchStart);
        containerRef.current.removeEventListener('touchmove', preventTouch, { passive: false });
      }
    };
  }, [containerRef]);

  return <div ref={containerRef}>{children}</div>;
};