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代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li {
  height: 120px;
  border-bottom: 1px solid gray;
}
#fixed {
  height: 400px;
  overflow: auto;
}
</style>
<script src=/article/detail/"angular.js"></script>/index.html
<script src=/article/detail/"scroll.js"></script>/index.html
</head>
<body ng-app="scroll" ng-controller="Main">
<div id="fixed" when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i}}</li>
  </ul>
</div>
</body>
</html>

3、后端PHP代码

<?php
//前端页数
$page = $_REQUEST['page'];
$limit = 10;
$start = ($page - 1) * $limit;
$end = $page * $limit;
//组织数据
$arr = array();
for ($i = $start; $i < $end; $i++) {
    $arr[] = $i;
}
//返回数据
$result = array(
    'data' => $arr, //数据源
    'countPage' => 5 //总分页
);
echo json_encode($result);

二、使用Jquery

1、HTML中多引入Jquery

<script src=/article/detail/"jquery.js"></script>/index.html

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、具体使用看项目需求，合适就好。

发布： 个人主页 @ 前端技术

标签： AngularJS