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

I am making a Ionic mobile app, whose main view is a vertical list of cards. I want each card to be "swipable", in the same way as Google Now cards.

我正在制作一个离子移动应用，它的主要视图是一个垂直的卡片列表。我希望每张卡片都是“可刷的”，就像现在的谷歌卡一样。

I started to implement this:

我开始实施这个:

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

The problem is that the user can scroll vertically while swiping the card. This is laggy and it's not the behavior I would expect.

问题是用户可以在刷卡时垂直滚动。这是一个拖沓的行为，这不是我所期望的。

Is there a way to disable vertical scroll only when the user is swiping a card?

是否只有当用户刷卡时才可以禁用垂直滚动?

[edit] I use native scrolling, not JS scrolling.

[编辑]我使用的是本机滚动，而不是JS滚动。

4 个解决方案

#1

You can use touchmove event to disable native scrolling. I took beaver's codepen as reference and added a touchmove event which checks for scroll object saved in local storage and disables scrolling if it is set to false. It is working but it is also closing the ionic options buttons in this example. I am sure you can experiment with some other elements and figure it out.

您可以使用touchmove事件来禁用本机滚动。我将beaver的codepen作为参考，并添加了一个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);
  }

Here is the example http://codepen.io/kumar_garapati/pen/jWZMbL?editors=0010

下面是示例http://codepen.io/kumar_garapati/pen/jWZMbL?editors=0010

you can read about more touchmove and native scrolling on following pages

您可以在接下来的页面上阅读更多的touchmove和native滚动

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

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

#2

Maybe you can try inspiration by this example based on CSS:

也许你可以尝试一下这个基于CSS的例子:

.no-scroll{
  pointer-events: none;
}

For example you could add the no-scroll class (using ngClass) during swipe-left operation.

例如，您可以在swipe-left操作期间添加no-scroll类(使用ngClass)。

#3

Try to use freezeScroll. Refer to How to disable content scrolling? and How to prevent vertical scroll on swipe left/right

尝试使用freezeScroll。参考如何禁用内容滚动?以及如何防止垂直滚动在向左/右滑动。

#4

-1

Another approach uses $ionicScrollDelegate to enable/disable vertical scrolling when needed.

另一种方法使用$ionicScrollDelegate在需要时启用/禁用垂直滚动。

So, for example, in each <ion-item> add on-drag-left and on-drag-right event handlers:

因此，例如，在每个中添加on-drag-left和on-drag-right事件处理程序:

    <ion-item ng-repeat="item in items" 
              item="item"
              on-drag-left="disableVerticalScrolling()"
              on-drag-right="enableVerticalScrolling()"
    ...

In those handlers $ionicScrollDelegate is used as in code below:

在这些处理程序中，使用$ionicScrollDelegate的代码如下:

  $scope.disableVerticalScrolling = function() {
    $ionicScrollDelegate.getScrollView().options.scrollingY = false;
  }

  $scope.enableVerticalScrolling = function() {
    $ionicScrollDelegate.getScrollView().options.scrollingY = true;
  }

These functions are also called when finished some operations done by option buttons (i.e. edit, delete, share, ...).

当完成一些由选项按钮完成的操作(即编辑、删除、共享、…)时，这些函数也会被调用。

Here is an example showing this approach:

这里有一个例子展示了这种方法:

http://codepen.io/beaver71/pen/XXVzXa?editors=101

#1

 $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);
  }