AngularJS封装指令实现下拉刷新自动翻页加载数据

目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据，本文来讲解一下。

滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight。

一、不适用Jquery,单纯使用AngularJS实现

1、定义模块、指令、控制器

scroll.js代码如下：

// 定义模块
var scroll = angular.module('scroll', []);
// 定义滚动指令
scroll.directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        // 内层DIV的滚动加载
        var raw = elm[0];
        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

scroll.controller('Main', ['$scope','$http', 
    function ($scope, $http) {
    // 当前页数
    $scope.currentPage = 0;
    // 总页数
    $scope.totalPages = 1;
    // 防止重复加载
    $scope.busy = false;
    // 存放数据
    $scope.items = [];
    // 请求数据方法
    $scope.loadMore = function() {
        if ($scope.currentPage < $scope.totalPages) {
            $scope.currentPage++; 
            if ($scope.busy) { 
                return false; 
            } 
            $scope.busy = true;
            // 请求后台服务器
            $http.get('http://127.0.0.1/Test/scroll/Test.php?page='+$scope.currentPage)
            .success(function(data) {
                $scope.busy = false;
                //组织数据
                for (var i in data.data) { 
                    $scope.items.push(data.data[i]);
                } 
                $scope.totalPages = data.countPage;
            });
        }
    };
    // 默认第一次加载数据
    $scope.loadMore();
}]);

2、HTML代码

li {
  height: 120px;
  border-bottom: 1px solid gray;
}
#fixed {
  height: 400px;
  overflow: auto;
}






  

    {{i}}
  

3、后端PHP代码

 $arr, //数据源
    'countPage' => 5 //总分页
);
echo json_encode($result);

二、使用Jquery的修改点

1、HTML中多引入Jquery

2、定义指令的时候改为jquery获取

// 定义滚动指令
scroll.directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        // body窗口的滚动加载--需要Jquery
        $(window).scroll(function () {
            //滚动条距离顶部的距离
            var scrollTop = $(window).scrollTop();
            //滚动条的高度
            var scrollHeight = $(document).height();
            //窗口的高度
            var windowHeight = $(window).height();
            if (scrollTop + windowHeight >= scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

三、注意事项

1、AngularJS实现的下拉使用实在外层容器DIV中，必须给DIV设置高度和overflow为auto。

2、Jquery实现的是直接给window绑定滚动事件，不需要设置高度，即可使用。

3、具体使用看项目需求，合适就好。