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

作者 : moxiaoxiang 发布时间: 2020-03-9 文章热度:459 共2235个字,阅读需6分钟。 本文内容有更新

目 录

目前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、具体使用看项目需求,合适就好。
本文最后更新于2019-1-25,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.09sk.com",如遇到无法解压的请联系管理员!

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

发表评论

576+

本站勉强运行

368+

用户总数

189+

资源总数

0+

今日更新

2020-7-4

最后更新时间