解决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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
微信小程序实现工作时间段选择
Feb 15 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
Ext 今日学习总结
2010/09/19 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
如何利用python生成MD5并去重
2020/12/07 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
综合测评自我鉴定
2013/10/08 职场文书
团队经理竞聘书
2014/03/31 职场文书
大学毕业寄语大全
2014/04/10 职场文书
协议书格式
2014/04/23 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014财务年终工作总结
2014/12/08 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
外出学习心得体会范文
2016/01/18 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
MySQL 如何分析查询性能
2021/05/12 MySQL
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server