目前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="angular.js"></script> <script src="scroll.js"></script> </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="jquery.js"></script>
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、具体使用看项目需求,合适就好。