Question

我正在制作一款Ionic移动应用，其主要视图是垂直列表。我希望每张卡片都能像Google即时卡一样以＃14;＃34 ;.

我开始实现这个：

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

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

是否有办法在用户刷卡时禁用垂直滚动？

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

Answer 1

您可以使用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);
  }

这是一个例子 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/

Answer 2

也许你可以通过基于CSS的example来尝试灵感：

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

例如，您可以在向左滑动操作期间添加no-scroll类（使用 ngClass ）。

Answer 3

尝试使用freezeScroll。请参阅How to disable content scrolling?和How to prevent vertical scroll on swipe left/right

Answer 4

另一种方法是使用$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;
  }

当通过选项按钮完成某些操作（即编辑，删除，共享......）时，也会调用这些函数。

以下是显示此方法的示例：

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

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

4 个答案: