解决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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JavaScript中this关键字用法实例分析
Aug 24 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 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 _autoload自动加载类与机制分析
2012/02/10 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
javascript 获取元素样式必杀技
2014/05/04 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Python用字典构建多级菜单功能
2019/07/11 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python中数据库like模糊查询方式
2020/03/02 Python
PyTorch中的C++扩展实现
2020/04/02 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
虚拟机下载python是否需要联网
2020/07/27 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
元旦促销方案
2014/03/15 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
2014年人大工作总结
2014/12/10 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers