在Ionic中，如何在向左滑动时禁用垂直滚动？ [英] In Ionic, how to disable vertical scrolling while swiping left?

问题描述

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

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.

我开始实现这个：

$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] 我使用原生滚动，而不是JS滚动。

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

推荐答案

您可以使用touchmove事件禁用本机滚动。我将 beaver 的codepen作为参考，并添加了一个touchmove事件，用于检查保存在本地存储中的滚动对象，并禁用滚动它设置为false。
它正在工作，但它也在关闭此示例中的离子选项按钮。我相信你可以尝试一些其他元素并弄明白。

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.

 $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和原生滚动的内容

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

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

http://blog.ionic.io/本地滚动在离子中的故事/韵律/

这篇关于在Ionic中，如何在向左滑动时禁用垂直滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！