如何防止向左/向右滑动垂直滚动

当我尝试向左/向右滑动我的应用程序内容时,也会垂直滚动创建凌乱的用户体验.有没有办法防止它？

这是我处理滑动的方式

// angular directive
link: function(scope, element, attrs) {
        $ionicGesture.on('swiperight', function(){console.log("swiped");}, element );
}

Manube.. 5

前言：在确保与ios和android环境兼容之后，该解决方案被完全改写。以下评论可能不再适用；欢迎任何反馈。

是的，有一种方法可以防止您在水平滑动时滚动应用程序内容：通过将angularjs tapDetector指令与ionic $ionicScrollDelegate服务结合使用。

我们还需要使用非常快速的dom事件检测（mousedown/ touchstart，mousemove/ touchmove，mouseup/ touchend）来检测滑动。这是必要的，因为$ionicGesture在完成滚动之后，事件侦听器会检测到滑动：出于我们的目的，检测离子中的滑动会减慢速度。

该tapDetector指令被放置在身体就像这样：

这是指令的代码：

.directive('tapDetector',function($ionicGesture,$ionicScrollDelegate){
  return{
    restrict:'EA',
    link:function(scope,element){
      var startX,startY,isDown=false;
      element.bind("mousedown touchstart", function(e){
        e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios
        startX = e.clientX;
        startY = e.clientY;
        isDown=true;
        //console.log("mousedown",startX,startY);
      });

      element.bind("mousemove touchmove", function(e){
        e=(e.touches)?e.touches[0]:e;//e.touches[0] is for ios
        if(isDown){
          var deltaX = Math.abs(e.clientX - startX);
                var deltaY = Math.abs(e.clientY - startY);

          if(deltaX > deltaY) {
          //console.log("horizontal move");
            $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);
            }
        }
      });

      element.bind("mouseup touchend", function(e){
        isDown=false;
        $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
        //console.log("mouseup touchend");
      });
    }
  }
})

当您触摸屏幕（准备滑动）时，触摸坐标将被设置（startX，startY）并isDown设置为true。

开始滑动时，我们需要确定滑动是水平还是垂直。我们只对水平滑动感兴趣：

var deltaX = Math.abs(e.clientX - startX);
var deltaY = Math.abs(e.clientY - startY);

deltaX是原始X与当前X之间的差（增量）； deltaY是原始Y和当前Y之间的差（增量）；

if (deltaX > deltaY)

我们进行了水平滑动！

现在已经足够快地检测到滑动，剩下要做的就是动态地防止滚动：

$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);

并在HTML中：

滚动完成后，我们必须解冻（解冻）滚动条：

element.bind("mouseup touchend", function(e){
                    isDown=false;
                    $ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(false);
                });

已在iPad 2和Android Galaxy S4上进行了测试

差点忘了：这是一支工作笔（由sMr提供）