angularjs实现上拉加载和下拉刷新数据功能
虽说AngularJS 1.x版本中对于上拉加载,下拉刷新数据功能都有做些封装,但还是有些人不清楚。其实我一开始也是不懂的,so.现在把搞懂的记录下免得少走弯路。
now,begin:先说下拉刷新吧,原理就是每次下拉都重新去服务器请求过一次新的数据。一般这种刷新功能的响应数据(也就是服务器返回的(json)数据)中都会带有
"rowsOfPage": 3, "currentPage": 1, "totalPages": 10, "totalRows": 40, "rowsOfPage":10, "minRowNumber": 1, "maxRowNumber": 3,
这样的属性字段。所以我们下拉刷新时只要把请求参数设置为currentPage:1,rowsOfPage:10。也就是要设置当前页始终的值为1,一页要显示多少行。然后把返回的data保存在一个数组中,其实这样基本就算是完成了这功能,但为了严谨些我们最好再判断下这个数组的长度是否小于总条数。再在这判断里面再判断下这个数组长度是否等于0,如果是就说明没有数据。我这边就直接赋值一下下拉刷新的执行代码。
$scope.hasMore = false; // $scope.dataNull=false; // 无数据提示 $scope.SName = "您当前没有待办事务"; $scope.do_refresher = function() { $scope.currentPage = 1; $scope.bItems = []; ajax.post(reqUrl, { "rowsOfPage": rowsOfPage, "currentPage": $scope.currentPage }, function(listdata, successful) { if (successful) { $scope.bItems = listdata.datas || []; $scope.hasMore = ($scope.bItems.length < listdata.totalRows); if ($scope.bItems.length == 0) { $scope.dataNull = true; } else { $scope.dataNull = false; } } else { $scope.hasMore = false; } $scope.$broadcast("scroll.refreshComplete"); });
而在页面中只要调用下<ion-refresher pulling-text="下拉刷新..." on-refresh="do_refresher()"></ion-refresher> 就可以了,其中$scope.$broadcast("scroll.refreshComplete");这个的作用是请求到数据刷新页面。
接下来是上拉加载数据功能。这个会比下拉刷新麻烦一点,但都懂了话也还好。上拉加载原理理解:请求的currentPage参数值为累加1.把请求到数据用push方法循环加到已有数据的数组中。这是理想的数据,我们平常在开发中还要判断这个是否有数据加载。我就先上下代码再说明应该会更好理解:
/* * 上拉加载,分批加载服务端剩余的数据 */ $scope.do_infinite = function() { if (!$scope.hasMore) { $scope.$broadcast("scroll.infiniteScrollComplete"); return; } // 如果当前页数大于等于总页数,说明已经没数据可再加载了。 $scope.currentPage += 1; ajax.post(reqUrl, { "rowsOfPage": rowsOfPage, "currentPage": $scope.currentPage }, function(listdata, successful) { if (successful) { //window.debug && alert("length " + listdata.datas.length + " yeshu " + $scope.currentPage); $scope.currentPage = listdata.currentPage; for (var i = 0; i < listdata.datas.length; i++) { $scope.bItems.push(listdata.datas[i]); } $scope.hasMore = ($scope.bItems.length < listdata.totalRows); } else { $scope.hasMore = false; } $scope.$broadcast("scroll.infiniteScrollComplete"); });
其中hasmore是布尔值判断是否还有更多数据。然后在请求参数currentPage的值是用累加的。用for循环把返回的数据push到已有数据的数组中,再判断当前的数组长度(也就是获取到本地的总条数)是否等于请求到返回数据总条数属性的值。如果这布尔值为true说明还有数据。同上 $scope.$broadcast("scroll.infiniteScrollComplete"); 也是刷新页面数据。在页面中只要在ion-list下面添加<ion-infinite-scroll ng-if="hasMore" on-infinite="do_infinite()" immediate-check="false"></ion-infinite-scroll> 就可以执行。
note:在html页面中,下拉刷新的功能要放在ion-list上面,
上拉加载则放在ion-list下面 有图片总不会理解错了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 版本管理工具总结
- java枚举类型enum的使用
- (66) 理解synchronized / 计算机程序的思维逻辑
- 用Python搭建一个校园维基网站(一)
- (67) 线程的基本协作机制 (上) / 计算机程序的思维逻辑
- 制作Aspose CHM文档的过程记录
- 用python搭建一个校园维基网站(二)—— 可编辑内容的首页的创建
- Django博客教程(四):让 django 完成翻译—迁移数据库模型
- Calendar类中add/set/roll方法的区别
- 如何构建一个分布式爬虫(理论篇)
- Python微型Web框架Bottle源码分析
- VirtualBox相关问题总结
- Java 枚举7常见种用法
- ALI的Tensorflow炼成与GAN科普
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- COBBLER无人值守批量安装系统.md
- 使用VSCode 打包你的第一个flutter应用(安卓篇)
- KICKSTART无人值守批量安装系统.md
- Centos7-Firewall防火墙基础讲解
- 优酷iOS插件化页面架构方法
- 处理一次k8s、calico无法分配podIP的心路历程
- 小视频源码,按返回键两次退出
- iOS音视频接入 - TRTC多人音视频通话
- Android平台RTMP推流或轻量级RTSP服务(同屏或摄像头)编码前数据接入类型总结
- 接口测试框架实战(二) | 搞定多环境下的接口测试
- MySQL 案例:“丢失数据”的谜题
- 接口测试框架实战(三) | APIObject 模式、原则与应用
- 接口测试框架实战(四) | 通用 API 封装实战
- 面试字节两轮后被完虐,一份字节跳动面试官给你的Android技术面试指南,请查收!
- 3分钟短文:说说Laravel模型中还算常用的2个“关系”