当列表为空 当ng-if为true的时候, 列表没有被填充满的时候 ,他就会自动加载loadMore();
当前位置:首页 > 日记 > 正文

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

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

说到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上拉加载的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

PS合成有趣的各种动物赛跑场景

PS合成有趣的各种动物赛跑场景

场景,有趣,动物,电脑软件,PS,效果图合成并不难,前期需要搜集一些奔跑的动物图片,并把这些动物抠出放到处理好的背景上;动物的形态不是很好的话,可以对局部变形处理;最后微调颜色和光影,并加上投影等即可。最终效果1、创建一个空白文档。2、设置背…

photoshop快捷键命令大全速记

photoshop快捷键命令大全速记

命令大全,快捷键,电脑软件,photoshop,Adobe Photoshop是电影、视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员, 以及工程和科学领域的专业人士的理想选择。而灵活使用软件快捷键则是学好软件的基础。工具箱(多种工具共…

利用Angular.js编写公共提示模块的

利用Angular.js编写公共提示模块的

方法,提示,模块,教程,电脑软件,前言在编写一些大型工程的时候,会经常遇到一些公用提示,使用框架自带很多时候不方便,于是我手写了一个,下面来看看详细的介绍:效果图如下方法如下一、先在angular中注册一个模块二、注册一个模块 注入依赖三、返回…

怎样删除网络上下载的PPT模板水印

怎样删除网络上下载的PPT模板水印

网络,下载,模板,删除,水印,  网络确实很强大,在如今的生活中我们都不能缺少网络。很多人现在都不用自己设计PPT模板了,但是网上下载的模板都带有各自网站的水印LOGO。以下是小编为您带来的关于删除网络上下载的PPT模板水印,希望对您有所帮助…

PS钢笔工具怎么添加锚点/删除锚点

PS钢笔工具怎么添加锚点/删除锚点

锚点,工具,删除,电脑软件,PS,今天我们就来看看关于锚点的相关知识,这些都是使用钢笔抠图最基础也是最需要掌握的知识,详细请看下文介绍。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、选取钢笔工具在…

AI+PS制作立体质感的卡通游戏标志

AI+PS制作立体质感的卡通游戏标志

教程,质感,标志,卡通,游戏,版权申明:本文原创作者"一池子水",感谢"AI和PS制作立体标志"的原创经验分享!使用AI结合PS制作立体质感的卡通游戏标志,教程过程主要分为标志由来、寻找参考、AI画形状、PS做质感,以及结合手绘五大部分,AI部分主要是…

jquery 实时监听输入框值变化的完

jquery 实时监听输入框值变化的完

方法,实时,输入框,必看,完美,只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美$('.input-form :input').bind('input propertychange', function(){ //获取.input-form下的所有 <input> 元素,并实时监听用户输入 …

ES6使用Set数据结构实现数组的交集

ES6使用Set数据结构实现数组的交集

数据结构,并集,数组,示例,功能,本文实例讲述了ES6使用Set数据结构实现数组的交集、并集、差集功能。分享给大家供大家参考,具体如下:Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值。Set本身是一个数据结构,用来生成Set数据…

Word文档中设置多级列表的方法是什

Word文档中设置多级列表的方法是什

文档,设置,列表,多级,方法,  不同的物品都有不同的分类,在Word文档中如果所有的分类文字都紧凑在一起,这样既不美观,也不方便阅读。可以设置分类列表,多级列表就能很好进行分类了。以下是小编为您带来的关于Word文档中设置多级列表的方法,希望…

VS2017添加EF的MVC控制器报错的解

VS2017添加EF的MVC控制器报错的解

解决方法,控制器,报错,电脑软件,EF,VS2017添加EF的MVC控制器报错的解决方法,供大家参考,具体内容如下1. 错误描述:no database provider has been configured fot this DbContext.此类错误是上下文的注册造成的.解决方式在DBContext中重写OnCo…

JS优化与惰性载入函数实例分析

JS优化与惰性载入函数实例分析

优化,分析函数,函数,实例分析,惰性,本文实例讲述了JS优化与惰性载入函数。分享给大家供大家参考,具体如下:惰性载入函数由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try…catch…语句。当每次调用函数时,都要对…

详解AngularJS中$filter过滤器使用

详解AngularJS中$filter过滤器使用

过滤器,自定义,详解,电脑软件,filter,1.内置过滤器* $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期,转换大小写等等。* 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多,可以百度。关键是如何…