当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - override "ons-sliding-menu" swipe behavior when using "ons-gesture-detector"

问题描述:

i'm making a quick demo on using "ons-gesture-detector" , i have a "ons-sliding-menu" which is swipable from the left side , so if i put for example a "ons-list-item" contained in a "ons-gesture-detector"

when i swipe left it works fine , but when i swipe right it fires ng-swiperight but also opens the sliding menu.

so what i want to do is to override opening side menu when i do "ng-swiperight"

here is a code sample:

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

Edit:

i've tried to add "swipe-target-width" with a small value to the "ons-sliding-menu" but this disabled the swipeleft and swiperight events at all

网友答案:

You can stop event propagation from the <ons-gesture-detector> element.

In this example I use the 'mousemove' event since I tried it on PC, however for a mobile device you should use the 'touchmove' event instead (or both).

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

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

I made an example on Codepen: http://codepen.io/argelius/pen/GgWYBj

分享给朋友:
您可能感兴趣的文章:
随机阅读: