温泉ui用锤子js轻扫手势问题/冲突

Question

我正在尝试使用HammerJS的swipeleft和swiperight事件。

我已将hammer.min.js添加到OnsenUI Project。 但它没有得到swipeleft，swiperight，dragleft或dragright事件。 这是一个非常糟糕的问题。

我正在使用此插件进行滑动：https://www.pierotoffanin.com/2014/03/horizontal-scrolling-single-page-website-done-right/

代码：

		// Bind gestures (if hammer is available)
        if (typeof(Hammer) !== 'undefined'){
            var hammer = new Hammer($container[0], { drag_min_distance: 1 });

            hammer.on("pinch pinchin pinchout", function(ev){
                ev.gesture.preventDefault();
            });


            hammer.on("release dragleft dragright swipeleft swiperight", function(ev){
                
                alert("red"); //it does NOT works
              
                var ev = event;

                ev.gesture.preventDefault();
                switch(ev.type) {
                    case 'dragright':
                    case 'dragleft':
                        // Stick to the finger
                        var pane_offset = -(100 / pages_count) * current_page;
                        var drag_offset = ((100 / panel_width) * ev.gesture.deltaX) / pages_count;

                        // Slow down at the first and last pane
                        if((current_page == 0 && ev.gesture.direction == "right") ||
                           (current_page == pages_count - 1 && ev.gesture.direction == "left")) {
                            drag_offset *= .4;
                        }

                        $container.setOffset(drag_offset + pane_offset);
                        break;
                    case 'swipeleft':
                        $container.next();
                        ev.gesture.stopDetect();
                        break;

                    case 'swiperight':
                        $container.prev();
                        ev.gesture.stopDetect();
                        break;

                    case 'release':
                        // More then 25% moved, navigate                    

                        if(Math.abs(ev.gesture.deltaX) > panel_width / 4) {
                            if(ev.gesture.direction == 'right') {
                                $container.prev();
                            }else{
                                $container.next();
                            }
                        }else{
                            $container.showPage(current_page, true);
                        }
                        break;
                }
            });

        }
};

<ons-template id="home.html" style="background:#fff;">
  <ons-navigator var="myNavigator" title="Navigator">
  </ons-navigator>
</ons-template>


<ons-template id="page-swipe.html">
  <ons-page ng-controller="PageController">
    
    
      <div id="content">

        <ul id="pages" class="animate"> <!-- this is the element to swipe-->
          <li id="page1" class="page overthrow">


            <ul id="list"> <!-- this is the list itens of page (the page has scroll) -->

              <li onclick="myNavigator.pushPage('test.html', { animation : 'slide' } )">
              </li>
              
              <li onclick="myNavigator.pushPage('test2.html', { animation : 'slide' } )">
              </li>
              
            </ul>
            
          </li>
        </ul>
      </div>
    </ons-page>
  </ons-template>