捕获安培故事中的滑动手势

如何解决捕获安培故事中的滑动手势

我正在使用放大器故事来显示故事。 github pull request表示他们已经实现了向左/向右滑动以查看下一个/上一个故事的功能。我可以看到此here的工作演示，但是当我尝试在页面上向左或向右滑动时，它仅显示“点击导航”提示。

我需要捕获所有这些轻扫事件并在其上调用我自己的函数，但不知道该怎么做（我是javascript的初学者）。我已经看到了amp-stories捕获滑动手势并决定是否要显示导航提示的代码：

amp-story.js

installGestureRecognizers_() {
    // If the story is within a viewer that enabled the swipe capability,this
    // disables the navigation education overlay to enable:
    //   - horizontal swipe events to the next story
    //   - vertical swipe events to close the viewer,or open a page attachment
    if (this.viewer_.hasCapability('swipe')) {
      return;
    }
    // Shows "tap to navigate" hint when swiping.
    gestures.onGesture(SwipeXYRecognizer,(gesture) => {
      const {deltaX,deltaY} = gesture.data;
      const embedComponent = /** @type {InteractiveComponentDef} */ (this.storeService_.get(
        StateProperty.INteraCTIVE_COMPONENT_STATE
      ));
      // Todo(enriqe): Move to a separate file if this keeps growing.
      if (
        this.storeService_.get(StateProperty.BOOKEND_STATE) ||
        embedComponent.state !== EmbeddedComponentState.HIDDEN ||
        this.storeService_.get(StateProperty.ACCESS_STATE) ||
        this.storeService_.get(StateProperty.SIDEBAR_STATE) ||
        !this.storeService_.get(StateProperty.SYstem_UI_IS_VISIBLE_STATE) ||
        !this.storeService_.get(StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT)
      ) {
        // Cancels the event for this gesture entirely,ensuring the hint won't
        // show even if the user keeps swiping without releasing the touch.
        if (gesture.event && gesture.event.cancelable !== false) {
          gesture.event.preventDefault(); // code breaks at this line
        }
        return;
      }
      if (
        (gesture.event && gesture.event.defaultPrevented) ||
        !this.isSwipeLargeEnoughForHint_(deltaX,deltaY)
      ) {
        return;
      }
      this.ampStoryHint_.showNavigationOverlay();
    });
    }
}

当我尝试滑动时，它在gesture.event.preventDefault()处中断并给出错误： amp-story.js:876 Unable to preventDefault inside passive event listener invocation

我要做的就是：

<head>
 //styles and scripts for amp-story here
 <script>
  // capture swipe events and call my function
 </script>
</head>
<body>
 <amp-story standalone title="my-story-page">
   <amp-story-page>
      <div class="my-story-text"> This is the first page of the story. </div>
   </amp-story-page>
   ...
 </amp-story>
</body>

捕获安培故事中的滑动手势

如何解决捕获安培故事中的滑动手势

相关推荐