angularjs实现上拉加载和下拉刷新数据功能


Posted in Javascript onJune 12, 2017

虽说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上面angularjs实现上拉加载和下拉刷新数据功能

上拉加载则放在ion-list下面angularjs实现上拉加载和下拉刷新数据功能 有图片总不会理解错了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
Vue非父子组件通信详解
Jun 12 #Javascript
详解angularjs 关于ui-router分层使用
Jun 12 #Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 #Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 #Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 #Javascript
前端构建工具之gulp的语法教程
Jun 12 #Javascript
You might like
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
php验证码生成器
2017/05/24 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
requireJS使用指南
2016/04/27 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python字符串替换实例分析
2015/05/11 Python
详解Swift中属性的声明与作用
2016/06/30 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python缓存技术实现过程详解
2019/09/25 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
django 取消csrf限制的实例
2020/03/13 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
大学生如何写自荐信
2014/01/08 职场文书
法学自荐信
2014/06/20 职场文书
公司新员工欢迎词
2015/09/30 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫