目前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