Question

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

这就是我处理滑动的方式

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

Answer 1

前言：在确保与ios和android环境的兼容性之后，这个解决方案被完全改写了。以下评论可能不再适用;任何反馈都是受欢迎的。

是，有一种方法可以防止在水平滑动时滚动应用内容：将angularjs tapDetector指令与离子$ionicScrollDelegate服务相结合。

我们还需要使用非常快速的dom事件检测来检测滑动（mousedown / touchstart，mousemove / touchmove，mouseup / {{ 1}}）; 这是必要的，因为touchend事件监听器在滚动完成后检测到滑动：检测离子滑动是为了我们的目的。

$ionicGesture指令放在正文上，如下所示：

tapDetector

以下是该指令的代码：

<body ng-controller="MyCtrl" tap-detector>

当您触摸屏幕（准备滑动）时，触摸坐标设置（startX，startY），.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"); }); } } })设置为true。

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

isDown

var deltaX = Math.abs(e.clientX - startX); var deltaY = Math.abs(e.clientY - startY);是原始X和当前X之间的差异（delta）; deltaX是原始Y和当前Y之间的差异（delta）;

deltaY

我们进行了横向滑动！

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

if (deltaX > deltaY)

并在HTML中：$ionicScrollDelegate.$getByHandle('mainScroll').freezeScroll(true);

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

<ion-content delegate-handle="mainScroll">

这是用iPad 2测试的和Android Galaxy S4

几乎忘了：这是working pen（由sMr提供）

Answer 2

目前离子团队没有API可以做到这一点，但我暂时制作了一个猴子补丁和功能请求。 https://github.com/driftyco/ionic/issues/2703

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

2 个答案: