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 相关文章推荐
javascript调试说明
Jun 07 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
JS匿名函数内部this指向问题详析
May 10 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 文件上传限制问题
2019/09/01 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
python聊天程序实例代码分享
2013/11/18 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python将字母转化为数字实例方法
2019/10/04 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Python基于内置函数type创建新类型
2020/10/22 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
用python制作个视频下载器
2021/02/01 Python
python 递归相关知识总结
2021/03/03 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
2014年党务公开实施方案
2014/02/27 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
临时用工协议书范本
2014/10/29 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
Java数组详细介绍及相关工具类
2022/04/14 Java/Android