解决ionic和angular上拉加载的问题


Posted in Javascript onAugust 03, 2017

说到ionic上拉加载就跟pc的分页是一样的,他需要在html数据列表的最下面边添加

<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> 
</ion-infinite-scroll>

当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore();

<span style="font-size:18px;">      $scope.loadMore = function() { 
      Msdk.postJSON('/informNotice/queryNoticeInfo', { 
          pageIndex: $scope.newsList.pageIndex, 
          pageSize: $scope.newsList.pageSize, 
          informIds: $scope.newsList.informIds 
        }, 
        function(e) { 
          if(e.length != 0) { 
            //把每次请求到的数据都拼接起来 
            var a = $scope.notice; 
            $scope.notice = a.concat(e); 
            console.log($scope.notice); 
            //广播上个加载结束,有条件进行下个加载 
            $scope.$broadcast('scroll.infiniteScrollComplete');             $scope.newsList.pageIndex++;</span>
<span style="font-size:18px;">                        //如果请求到的数据小于pageSize,证明没数据可读</span> 

<span style="font-size:18px;"><span style="white-space:pre">            </span>//hasmore变为false,不会执行上拉加载 
            if(e.length < $scope.newsList.pageSize) { 
              $scope.hasmore = false; 
            } else {</span> 
[javascript] view plain copy
<span style="font-size:18px;"><span style="white-space:pre">              </span>//为true有条件进行下次上拉加载 
              $scope.hasmore = true; 
            } 
          } else { 
            $scope.hasmore = false; 
            $scope.$broadcast('scroll.infiniteScrollComplete'); 
          } 
        }) 
    }</span>

总结

以上所述是小编给大家介绍的解决ionic和angular上拉加载的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 #Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 #Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 #Javascript
浅谈pc端rem字体设置的问题
Aug 03 #Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 #Javascript
You might like
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
限制只能输入数字的实现代码
2016/05/16 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
javascript实现简易计算器
2017/02/01 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
jQuery常用选择器详解
2017/07/17 jQuery
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
django解决跨域请求的问题
2018/11/11 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python中的元组介绍
2019/01/28 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
通过自学python能找到工作吗
2020/06/21 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
python help函数实例用法
2020/12/06 Python
自我鉴定写作要点
2014/01/17 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
出纳会计岗位职责
2014/03/12 职场文书
婚礼主持词
2014/03/13 职场文书
暑期教师培训方案
2014/06/07 职场文书
校园文明标语
2014/06/13 职场文书
防火标语大全
2014/10/06 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
社区工作者个人总结
2015/02/28 职场文书
自荐信范文
2019/05/20 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫