解决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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
Js 中debug方式
Feb 07 Javascript
关于this和self的使用说明
Aug 01 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
Vue.js原理分析之nextTick实现详解
Sep 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递归删除目录几个代码实例
2014/04/21 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
javascript 回调函数详解
2014/11/11 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
vue axios用法教程详解
2017/07/23 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
个人工作总结范文2014
2014/11/07 职场文书
考研经验交流会策划书
2015/11/02 职场文书
初中思品教学反思
2016/02/20 职场文书
装修安全责任协议书
2016/03/22 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js