angular+ionic 的app上拉加载更新数据实现方法


Posted in Javascript onJanuary 16, 2017

第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>

里面的属性解释,

ng-if  值 布尔型,如果为true,则可以触发上拉事件
on-infinite 上拉时触发的事件
distance 列表底部滚动到可触发上拉事件的距离,默认为1%
icon 加载时显示的加载图标,默认为 'ion-loading-d'

第二步:在控制器内书写

$scope.hasmore = true;

定义可触发事件的对象

然后书写loadMore事件

//上拉事件 
    $scope.loadMore = function () { 
      $scope.dataValue.page++; 
      loadajax(); 
    }

然后写loadajax事件

function loadajax() { 
      var dataValue = $scope.dataValue; 
      var ip = "http://" + $rootScope.form.ip + "/appGetpage"; 
      var req = { 
        method: 'POST', //请求的方式 
        url: ip, //请求的地址 
        headers: { 
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
          'Accept': '*/*' 
        }, //请求的头,如果默认可以不写 
        timeout: 5000, //超时时间,还没有测试 
        data: "value=" + JSON.stringify(dataValue) //message 必须是a=b&c=d的格式 
      }; 
      $http(req).success(function (data) { 
        if (data.data.length == 0) { 
          $scope.hasmore = false;//这里判断是否还能获取到数据,如果没有获取数据,则不再触发加载事件 
          return; 
        } 
        $scope.items = $scope.items.concat(data.data); 
      }).error(function () { 
        console.log("err"); 
      }).finally(function () { 
        $scope.$broadcast('scroll.infiniteScrollComplete');//这里是告诉ionic更新数据完成,可以再次触发更新事件 
        $scope.$broadcast('scroll.refreshComplete'); 
      }); 
    }

以上所述是小编给大家介绍的angular+ionic 的app上拉加载更新数据实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
jQuery实现简易的输入框字数计数功能示例
Jan 16 #Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 #Javascript
Javascript的this用法
Jan 16 #Javascript
jQuery向webApi提交post json数据
Jan 16 #Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 #Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 #Javascript
You might like
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php代码架构的八点注意事项
2016/01/25 PHP
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python列表对象实现原理详解
2019/07/01 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
环卫工作汇报材料
2014/10/28 职场文书
党校党性分析材料
2014/12/19 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript