Question

我正在使用＆＃34; ons-gesture-detector＆＃34;进行快速演示。，我有一个＆＃34; ons-sliding-menu＆＃34;这是从左侧可以移动的，所以如果我举一个＆＃34; ons-list-item＆＃34;包含在＆＃34; ons-gesture-detector＆＃34;

当我向左滑动时它工作正常，但是当我向右滑动时它会触发ng-swiperight，但也会打开滑动菜单。

所以我想要做的是在我做的时候覆盖开场边菜单＆＃34; ng-swiperight＆＃34;

这是一个代码示例：

<ons-sliding-menu menu-page="menu.html" main-page="balance.html" side="left"
              var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-list ng-controller="testController">
    <ons-gesture-detector ng-swipeleft="sayAlert('left')" ng-swiperight="sayAlert('right')">
        <ons-list-item ng-click="showPopup('list.html')" modifier="tappable">
            <center>
                List
                <br />
                List
                List
                <br />
                List
            </center>
        </ons-list-item>
    </ons-gesture-detector>
    <ons-gesture-detector ng-swipeleft="sayAlert('left')" ng-swiperight="sayAlert('right')">
        <ons-list-item ng-click="showPopup('list.html')" modifier="tappable">
            <center>
                List
                <br />
                List
                List
                <br />
                List
            </center>
        </ons-list-item>
    </ons-gesture-detector>
</ons-list>

修改我试图添加＆＃34; swipe-target-width＆＃34;对于＆＃34; ons-sliding-menu＆＃34;具有较小的价值。但是这会阻止所有的滑动和swiperight事件

Answer 1

您可以停止<ons-gesture-detector>元素的事件传播。

在此示例中，我使用'mousemove'事件，因为我在PC上尝试过，但对于移动设备，您应该使用'touchmove'事件（或两者）。

ons.ready(function() {
  var gestureDetector = document.querySelector('ons-gesture-detector');

  gestureDetector.addEventListener('mousemove', function(ev) {
    ev.stopPropagation();
  });
});

我在Codepen上做了一个例子： http://codepen.io/argelius/pen/GgWYBj

使用“ons-gesture-detector”时覆盖“ons-sliding-menu”滑动行为

1 个答案: