關鍵詞：directive infiniteScroll infiniteScrollDistance infiniteScrollDisabled $window.on $window.off

在網上查了很多相關技術，在電腦瀏覽器上能正常的實現自動載入更多功能，但是放到手機APP殼子上就不行了。下面把程式碼和自己的分析寫下來，便於以後回憶。

首先使用angularjs裡的指令來使任何用到自動載入更多的地方都可以呼叫到這個方法：

app.directive('infiniteScroll', [  '$rootScope', '$window', '$timeout', function($rootScope, $window, $timeout
 
) {    return {      link: function(scope, elem, attrs) { //裡面加入下面的程式碼      }    };  }]);

所以我們要獲取三個很關鍵的數值：

1.當前選中元素頁面的總長度elem.children().height()。

2.滑動條向下滑動的距離$window.scrollTop()。

3.所選中元素展示框的高度$window.height()。

當2+3=1時，就可以觸發載入更多函數了，從而達到目的。

為了實時獲取最新的上面三個值，我使用jQuery的$window.on('scroll', handler);方法，將滑動條scroll動作和handler函式繫結起來，在handler函式中判斷當前2+3是不是等於1了，等於時則執行getmore();

程式碼如下：

var checkWhenEnabled, handler, scrollDistance, scrollEnabled;$window = angular.element(elem);scrollDistance = 0;if (attrs.infiniteScrollDistance != null) {//接收並返回觸發載入更多的距離  scope.$watch(attrs.infiniteScrollDistance, function(value) {    return scrollDistance = parseInt(value, 10);  });}scrollEnabled = true
 
;checkWhenEnabled = false;if (attrs.infiniteScrollDisabled != null) {  scope.$watch(attrs.infiniteScrollDisabled, function(value) {    scrollEnabled = !value;    if (scrollEnabled && checkWhenEnabled) {      checkWhenEnabled = false;      return handler();    }  });}handler = function() {  var elementBottom, remaining, shouldScroll, windowBottom;  windowBottom = $window.height() + $window.scrollTop();  elementBottom = elem.children().height();  remaining = elementBottom - windowBottom;  shouldScroll = remaining <=  scrollDistance;  if (shouldScroll && scrollEnabled) {//達到可載入距離   console.log("$rootScope.$$phase",$rootScope.$$phase);    if ($rootScope.$$phase) {      return scope.$eval(attrs.infiniteScroll);//執行getmore操作    } else {      return scope.$apply(attrs.infiniteScroll);//執行getmore操作    }  } else if (shouldScroll) {    return checkWhenEnabled = true;  }};$window.on('scroll', handler);//監控scroll滑動則執行handler函式scope.$on('$destroy', function() {//離開頁面則關閉scroll與handler的繫結  return $window.off('scroll', handler);});

<div infinite-scroll="getMore()" infinite-scroll-disabled='busy' infinite-scroll-distance='1'>

$scope.getMore=function(){ $scope.custParam.page=$scope.custParam.page+1;//載入頁數+1}

效果圖如下：