我正在制作一个 Ionic 移动应用程序，它的主视图是一个垂直的卡片列表。我希望每张卡片都可以“刷卡”，就像 Google Now 卡片一样。
我开始实现这个：
$scope.onDrag = function(event, card){
$scope.draggedStyle = {
"left": (event.gesture.deltaX) + "px",
"-webkit-transform": "translateZ(0)"
};
}
问题是用户可以在刷卡的同时垂直滚动。这是滞后的，这不是我所期望的行为。
有没有办法只在用户刷卡时禁用垂直滚动？
[edit]我使用原生滚动，而不是 JS 滚动。
【问题讨论】：
您可以使用 touchmove 事件来禁用本机滚动。我将beaver 的代码笔作为参考，并添加了一个 touchmove 事件，该事件检查保存在本地存储中的滚动对象，如果设置为 false，则禁用滚动。 它正在工作，但它也在此示例中关闭离子选项按钮。我相信您可以尝试其他一些元素并弄清楚。
$window.localStorage["Scroll"] = JSON.stringify(true);
angular.element($window).bind('touchmove', function(e) {
var scroll = JSON.parse($window.localStorage["Scroll"]);
if(!scroll)
{
e.preventDefault();
}
});
$scope.disableVerticalScrolling = function() {
console.log("disableVerticalScrolling");
$ionicScrollDelegate.getScrollView().options.scrollingY = false;
$window.localStorage["Scroll"] = JSON.stringify(false);
}
$scope.enableVerticalScrolling = function() {
console.log("enableVerticalScrolling");
$ionicScrollDelegate.getScrollView().options.scrollingY = true;
$window.localStorage["Scroll"] = JSON.stringify(true);
}
这是一个例子 http://codepen.io/kumar_garapati/pen/jWZMbL?editors=0010
您可以在以下页面上了解更多 touchmove 和原生滚动
https://github.com/phonegap/phonegap/wiki/Prevent-Scrolling
http://blog.ionic.io/native-scrolling-in-ionic-a-tale-in-rhyme/
【讨论】：
也许你可以通过这个基于 CSS 的example 来尝试灵感：
.no-scroll{
pointer-events: none;
}
例如，您可以在向左滑动操作期间添加no-scroll 类（使用ngClass）。
【讨论】：
【讨论】：
另一种方法使用$ionicScrollDelegate 在需要时启用/禁用垂直滚动。
因此，例如，在每个 <ion-item> 添加 on-drag-left 和 on-drag-right 事件处理程序：
<ion-item ng-repeat="item in items"
item="item"
on-drag-left="disableVerticalScrolling()"
on-drag-right="enableVerticalScrolling()"
...
在这些处理程序中，$ionicScrollDelegate 的使用如下代码所示：
$scope.disableVerticalScrolling = function() {
$ionicScrollDelegate.getScrollView().options.scrollingY = false;
}
$scope.enableVerticalScrolling = function() {
$ionicScrollDelegate.getScrollView().options.scrollingY = true;
}
在完成选项按钮完成的某些操作时也调用这些函数（即编辑，删除，共享，......）。
这是一个展示这种方法的示例：
【讨论】：
$ionicConfigProvider.scrolling.jsScrolling(false);，但它不起作用更多