Question

我有这样的内容：

<ion-content delegate-handle="mainScroll">
  <ion-scroll delegate-handle="horizontalScroll" direction="x">
  </ion-scroll>
  <ion-scroll delegate-handle="horizontalScroll" direction="x">
  </ion-scroll>
  <ion-scroll delegate-handle="horizontalScroll" direction="x">
  </ion-scroll>
</ion-content>

基本上我想要的是在父容器（离子内容）内垂直滚动的多个水平滚动条（离子滚动）。问题是尝试抓住水平滚动条并垂直拖动它不起作用，所以我需要以某种方式将该事件推迟到父级。

我看到了委托功能：

<ion-scroll delegate-handle="horizontalScroll" direction="x" on-scroll="delegateScroll()">
</ion-scroll>

$scope.delegateScroll = function() {
  // what do I do here?
}

但是我不知道如何抓住这个事件并做一些有用的事情。帮助

Answer 1

解决了我自己的问题。这比我想象的要复杂得多，但它确实有效。请参阅下面的代码。

http://codepen.io/anon/pen/BoGkA

angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {
  $timeout(function(){
    return false; // <--- comment this to "fix" the problem
    var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();

    var container = sv.__container;

    var originaltouchStart = sv.touchStart;
    var originalmouseDown = sv.mouseDown;
    var originaltouchMove = sv.touchMove;
    var originalmouseMove = sv.mouseMove;

    container.removeEventListener('touchstart', sv.touchStart);
    container.removeEventListener('mousedown', sv.mouseDown);
    document.removeEventListener('touchmove', sv.touchMove);
    document.removeEventListener('mousemove', sv.mousemove);


    sv.touchStart = function(e) {
      e.preventDefault = function(){}
      originaltouchStart.apply(sv, [e]);
    }

    sv.touchMove = function(e) {
      e.preventDefault = function(){}
      originaltouchMove.apply(sv, [e]);
    }

    sv.mouseDown = function(e) {
      e.preventDefault = function(){}
      originalmouseDown.apply(sv, [e]);
    }

    sv.mouseMove = function(e) {
      e.preventDefault = function(){}
      originalmouseMove.apply(sv, [e]);
    }

    container.addEventListener("touchstart", sv.touchStart, false);
    container.addEventListener("mousedown", sv.mouseDown, false);
    document.addEventListener("touchmove", sv.touchMove, false);
    document.addEventListener("mousemove", sv.mouseMove, false);
  });
});

Ionic / AngularJS - 将垂直滚动事件延迟到父元素

1 个答案: