angularjs - 在 Ionic 中，如何在向左滑动时禁用垂直滚动？

Question

我正在制作一个 Ionic 移动应用程序，其主视图是一个垂直的卡片列表。我希望每张卡片都可以“刷卡”，就像 Google Now 卡片一样。

我开始实现这个:

$scope.onDrag = function(event, card){
    $scope.draggedStyle = {
        "left": (event.gesture.deltaX) + "px",
        "-webkit-transform": "translateZ(0)"
    };
}

问题是用户在刷卡的时候可以垂直滚动。这是滞后的，这不是我期望的行为。

有没有办法只在用户刷卡时禁用垂直滚动？

[edit] 我使用原生滚动，而不是 JS 滚动。

Answer 1

您可以使用 touchmove 事件来禁用 native 滚动。我拍了beaver的 codepen 作为引用，并添加了一个 touchmove 事件，该事件检查保存在本地存储中的滚动对象，如果设置为 false，则禁用滚动。 它正在工作，但它也在这个例子中关闭了 ionic 选项按钮。我相信您可以尝试其他一些元素并找出答案。

 $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

您可以在以下页面上阅读更多关于触摸移动和 native 滚动的信息

https://github.com/phonegap/phonegap/wiki/Prevent-Scrolling

http://blog.ionic.io/native-scrolling-in-ionic-a-tale-in-rhyme/