垂直和水平滾動離子內容與離子無限滾動僅垂直

Question

在我的離子內容我有一個列表，當滾動到底部更多的項目被加載（由離子無限滾動許多調用'LoadMore提供（ ）「）。 問題是，如果我將direction = xy設置爲ion-content，則如果我縱向和橫向滾動，ion-infinite-scroll會調用「LoadMore（）」。 垂直滾動時，我的離子無限滾動可能只調用'LoadMore（）'嗎？

謝謝！

Answer 1

目前離子版本beta.13不支持此功能。 我已經張貼了我的離子庫的建議解決方法（https://github.com/driftyco/ionic/issues/1073）

我創建「離子無限滾動固定」指令至極區別僅在最後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(); 
     } 
     } 
    } 
    }; 
}]); 

，並在我的HTML：

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

我希望這可以幫助別人:)