Scroll 垂直和水平滚动离子内容，离子无限滚动仅垂直

在我的ion内容中，我有一个列表，当滚动到底部时，会加载更多的项目（由ion infinite scroll提供，它调用'LoadMore（）'。 问题是，如果我将direction=xy设置为ion content，则如果我垂直和水平滚动，ion infinite scroll将调用“LoadMore（）”

---

当垂直滚动时，我的ion infinite scroll可能只调用“LoadMore（）”？

当前ionic版本beta.13不支持此功能。 我已经在ionic repository（）上发布了我的建议解决方案

我创建了“ion infinite scroll fixed”指令，它只在最后一个

if

块中有所不同：

.directive('ionInfiniteScrollFixed', ['$timeout', function($timeout) {
  function calculateMaxValue(distance, maximum, isPercent) {
    return isPercent ?
      maximum * (1 - parseFloat(distance,10) / 100) :
      maximum - parseFloat(distance, 10);
  }
  return {
    restrict: 'E',
    require: ['^$ionicScroll', 'ionInfiniteScrollFixed'],
    template: '<i class="icon {{icon()}} icon-refreshing"></i>',
    scope: true,
    controller: ['$scope', '$attrs', function($scope, $attrs) {
      this.isLoading = false;
      this.scrollView = null; //given by link function
      this.getMaxScroll = function() {
        var distance = ($attrs.distance || '2.5%').trim();
        var isPercent = distance.indexOf('%') !== -1;
        var maxValues = this.scrollView.getScrollMax();
        return {
          left: this.scrollView.options.scrollingX ?
            calculateMaxValue(distance, maxValues.left, isPercent) :
            -1,
          top: this.scrollView.options.scrollingY ?
            calculateMaxValue(distance, maxValues.top, isPercent) :
            -1
        };
      };
    }],
    link: function($scope, $element, $attrs, ctrls) {
      var scrollCtrl = ctrls[0];
      var infiniteScrollCtrl = ctrls[1];
      var scrollView = infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;

      $scope.icon = function() {
        return angular.isDefined($attrs.icon) ? $attrs.icon : 'ion-loading-d';
      };

      var onInfinite = function() {
        $element[0].classList.add('active');
        infiniteScrollCtrl.isLoading = true;
        $scope.$parent && $scope.$parent.$apply($attrs.onInfinite || '');
      };

      var finishInfiniteScroll = function() {
        $element[0].classList.remove('active');
        $timeout(function() {
          scrollView.resize();
          checkBounds();
        }, 0, false);
        infiniteScrollCtrl.isLoading = false;
      };

      $scope.$on('scroll.infiniteScrollComplete', function() {
        finishInfiniteScroll();
      });

      $scope.$on('$destroy', function() {
        void 0;
        if(scrollCtrl && scrollCtrl.$element)scrollCtrl.$element.off('scroll', checkBounds);
      });

      var checkBounds = ionic.animationFrameThrottle(checkInfiniteBounds);

      //Check bounds on start, after scrollView is fully rendered
      setTimeout(checkBounds);
      scrollCtrl.$element.on('scroll', checkBounds);

      function checkInfiniteBounds() {
        if (infiniteScrollCtrl.isLoading) return;

        var scrollValues = scrollView.getValues();
        var maxScroll = infiniteScrollCtrl.getMaxScroll();

        if ((maxScroll.left !== -1 && scrollValues.left >= maxScroll.left && $attrs.notOnHorizontal !=="true") ||
            (maxScroll.top !== -1 && scrollValues.top >= maxScroll.top && $attrs.notOnVertical !=="true")) {
          onInfinite();
        }
      }
    }
  };
}]);

.directive（'ionFiniteScrollFixed'，['$timeout'，函数（$timeout）{
函数calculateMaxValue（距离、最大值、isPercent）{
回报率是多少？
最大*（1-浮动距离，10）/100）：
最大-最大浮动（距离，10）；
}
返回{
限制：'E'，
要求：['^$ionicScroll'，'ionInfiniteScrollFixed']，
模板：“”，
范围：正确，
控制器：['$scope'，'$attrs'，函数（$scope，$attrs）{
this.isLoading=false；
this.scrollView=null；//由link函数给出
this.getMaxScroll=函数（）{
变量距离=（$attrs.distance | |“2.5%”）。trim（）；
var isPercent=距离。indexOf（'%'）！=-1；
var maxValues=this.scrollView.getScrollMax（）；
返回{
左：this.scrollView.options.scrollingX？
calculateMaxValue（距离，maxValues.left，isPercent）：
-1,
顶部：this.scrollView.options.scrollingY？
calculateMaxValue（距离，maxValues.top，isPercent）：
-1
};
};
}],
链接：函数（$scope、$element、$attrs、ctrls）{
var scrollCtrl=ctrls[0]；
var InfiniteSrollCtrl=ctrls[1]；
var scrollView=infiniteScrollCtrl.scrollView=scrollCtrl.scrollView；
$scope.icon=函数（）{
返回角度.isDefined（$attrs.icon）？$attrs.icon:'ion-loading-d'；
};
var onInfinite=函数（）{
$element[0].classList.add（'active'）；
InfiniteSrollCtrl.isLoading=true；
$scope.$parent&$scope.$parent.$apply（$attrs.onInfinite | |“”）；
};
var finishFiniteScroll=函数（）{
$element[0]。classList.remove（'active'）；
$timeout（函数（）{
scrollView.resize（）；
checkBounds（）；
}，0，假）；
InfiniteSrollCtrl.isLoading=false；
};
$scope.$on（'scroll.infiniteScrollComplete'，function（）{
FinishFiniteScroll（）；
});
$scope.$on（“$destroy”，函数（）{
无效0；
if（scrollCtrl&&scrollCtrl.$element）scrollCtrl.$element.off（'scroll'，checkBounds）；
});
var checkBounds=ionic.animationFrameThrottle（checkInfiniteBounds）；
//在scrollView完全渲染后，在开始时检查边界
设置超时（检查边界）；
scrollCtrl.$element.on（'scroll'，checkBounds）；
函数checkInfiniteBounds（）{
if（InfiniteSrollCtrl.isLoading）返回；
var scrollValues=scrollView.getValues（）；
var maxScroll=infiniteScrollCtrl.getMaxScroll（）；
if（（maxScroll.left！=-1&&scrollValues.left>=maxScroll.left&&$attrs.notOnHorizontal！==“true”）||
（maxScroll.top！=-1&&scrollValues.top>=maxScroll.top&&attrs.notInvertical！==“true”））{
onfinite（）；
}
}
}
};
}]);

在我的HTML中：

 <ion-infinite-scroll-fixed 
          not-on-horizontal="true"
          ng-if="infiniteScroll.canLoad"
          on-infinite="infiniteScroll.loadMore();"
          distance="1%">
 </ion-infinite-scroll-fixed>

我希望这能帮助某人：）