解决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对象和字串之间的转换实例探讨
Apr 21 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
微信小程序实现上传图片功能
2018/05/28 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
python删除服务器文件代码示例
2018/02/09 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python Requests库基本用法示例
2018/08/20 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python怎么自定义捕获错误
2020/06/29 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
建龙钢铁面试总结
2014/04/15 面试题
给全校老师的建议书
2014/03/13 职场文书
七夕情人节促销方案
2014/06/07 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android