2015-01-15 2 views
0

"ons-gesture-detector"를 사용하는 데 대한 빠른 데모를 만들고 있는데, "ons-sliding-menu"가 있습니다 왼쪽부터 스 와이프 가능합니다. 예를 들어 "온 - 제스처 - 디텍터"에 포함 된 "ons-list-item"을 입력하면"ons-gesture-detector"를 사용할 때 "ons-sliding-menu"스 와이프 동작을 무시합니다.

왼쪽으로 스 와이프하면 제대로 작동하지만 오른쪽으로 스 와이프하면 실행됩니다. ng-swiperight뿐만 아니라 슬라이딩 메뉴를 엽니 다.

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

편집 : 내가 '난에 "NG-swiperight"를 수행 할 때

그래서 내가하고 싶은 여기

코드 샘플입니다 사이드 메뉴를 열고 무시하는 것입니다 작은 값을 가진 "swipe-target-width"를 "ons-sliding-menu"에 추가하려했으나 swipeleft 및 swiperight 이벤트가 전혀 비활성화되었습니다.

답변

1

<ons-gesture-detector> 요소로부터 이벤트 전파.

이 예제에서는 PC에서 시도한 이후 'mousemove' 이벤트를 사용하지만 모바일 장치의 경우에는 'touchmove' 이벤트를 대신 사용해야합니다. http://codepen.io/argelius/pen/GgWYBj

:

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

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

나는 Codepen에 대한 예제를 만들어