使用Angularjs、jQuery在手机上实现滑动条到底自动加载更多功能

关键词：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) {
//里面加入下面的代码
}
};
}
]);

自动加载更多的主要思路是当滑动条滚动到底部时，会触发原有的手动ng-click="function()"函数，达到加载更多目的。

所以我们要获取三个很关键的数值：

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);
});

以上就是directive中的代码，接下来在html中要监控的dom元素顶端加入以下代码：

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

之后再js代码中写加载更多getmore()函数：

$scope.getMore=function(){
$scope.custParam.page=$scope.custParam.page+1;//加载页数+1
}

html和js中的代码要根据实际情具体问题具体分析，directive中的代码一般是可以通用的。

效果图如下：





啊