第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

1.将tab1.html的代码改为如下:

  1. <ion-content>
  2. <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
  3. <ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)">
  4. <ion-slide ng-repeat="slide in slides">
  5. <div class="list has-header">
  6. <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
  7. <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
  8. <h3>{{item.title}}</h3>
  9. <p>{{item.description | substring:item.description}}</p>
  10. </a>
  11. </div>
  12. <ion-infinite-scroll ng-if="!hasmore" on-infinite="loadMore()" distance="1%">
  13. </ion-infinite-scroll>
  14. </ion-slide>
  15. </ion-slide-box>
  16. </ion-content>

2.controller.js层Tab1Ctrl的实现

  1. .controller('Tab1Ctrl', function ($scope, Tab1Service, $ionicSlideBoxDelegate, $ionicTabsDelegate) {
  2.  
  3. var page = 1,isLock=false;
  4. $scope.items = [];
  5. $scope.loadMore = function () {
  6. if(isLock)return;
  7. isLock=true;
  8. Tab1Service.getList(classify[0].url, page).success(function (response) {
  9. console.log(page)
  10. if (response.tngou.length == 0) {
  11. $scope.hasmore = true;
  12. return;
  13. }
  14. page++;
  15. $scope.items = $scope.items.concat(response.tngou);
  16. }).finally(function (error) {
  17. isLock = false;
  18. $scope.$broadcast('scroll.infiniteScrollComplete');
  19. $scope.$broadcast('scroll.refreshComplete');
  20. });
  21. };
  22. $scope.doRefresh = function () {
  23. page = 1;
  24. $scope.items = [];
  25. $scope.loadMore();
  26. }
  27. })

3.代码解释

上面菜单部分使用了Tab组建,中间的列表部分使用SlideBox,并不存在任何嵌套,只是在各自选择的时候做一些处理。

  • ion-refresher标签:下拉刷新的效果,下拉时触发doRefresh。
  • ion-infinite-scroll标签:上拉加载的效果 。
  • islock:锁,防止在网络慢的时候多次请求。
  • hasmore:在最后一页的时候禁止触发加载更多。

[ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll的更多相关文章

  1. [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...

  2. [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  3. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  4. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  5. [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...

  6. [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)

    [ionic开源项目教程] - 第8讲  根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...

  7. [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...

  8. [ionic开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现

    第15讲 ionic用户个人中心登录注册的实现 这一讲包括登陆.注册.个人中心.个人资料页面的实现. 在一讲的改动有四个地方: 在config.js里配置接口地址 完善个人中心的服务层(service ...

  9. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

随机推荐

  1. Java Api与HBase交互实例

    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hb ...

  2. HDOJ 1028 Ignatius and the Princess III (母函数)

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  3. ZOJ3238 Water Ring(计算几何)

    题意:给你一个圆形和很多个矩形,然后要你求圆形的圆周有多少被矩形覆盖. 思路:比赛的时候是有思路的了,不过一直在调别的题,最后剩下30分钟肯定来不及敲.想法是这样的,要是我们可以求出每个矩形覆盖了圆周 ...

  4. touch事件学习

    window.onload = function(){ var touch = { movetarget : false, touchStart : function (e) { console.lo ...

  5. CPLD VS FPGA

    FPGA(Field-Programmable Gate Array),即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的 ...

  6. SQL技术内幕-10 in和exists 性能比较

    in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的. 如果查询的两 ...

  7. group_concat

    分割字符串 group_concat(a.EvidencesID separator ',') as EvidencesID #在MySQL配置文件(my.ini)中默认无该配置项,使用默认值时,值为 ...

  8. Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解(三)

    前两章我为大家详细介绍了如何搭建Maven环境.Spring MVC的流程结构.Spring MVC与Struts2的区别以及示例中的一些配置文件的分析.在这一章,我就对示例的层次结构进行说明,以及M ...

  9. React-非dom属性-key

    一.react性能 1.内容类似的尽量归到同一人组件,这样react不用每次都重新渲染 2.类似列表的内容,要加上key,可减少渲染次数 3.react渲染过程 二.代码 <!DOCTYPE h ...

  10. Centos环境下部署游戏服务器-Eclipse

    一直在想这篇文章该不该写,因为这篇文章更像是教你如何使用一个ide这种文章,毫无价值可言.但思来想去还是应给写.上篇文章主要说了编译原理和过程,这篇文章就是理论联系实际的典范.并且很多工程师一辈子都不 ...