[ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
1.将tab1.html的代码改为如下:
- <ion-content>
- <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
- <ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)">
- <ion-slide ng-repeat="slide in slides">
- <div class="list has-header">
- <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
- <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
- <h3>{{item.title}}</h3>
- <p>{{item.description | substring:item.description}}</p>
- </a>
- </div>
- <ion-infinite-scroll ng-if="!hasmore" on-infinite="loadMore()" distance="1%">
- </ion-infinite-scroll>
- </ion-slide>
- </ion-slide-box>
- </ion-content>
2.controller.js层Tab1Ctrl的实现
- .controller('Tab1Ctrl', function ($scope, Tab1Service, $ionicSlideBoxDelegate, $ionicTabsDelegate) {
- var page = 1,isLock=false;
- $scope.items = [];
- $scope.loadMore = function () {
- if(isLock)return;
- isLock=true;
- Tab1Service.getList(classify[0].url, page).success(function (response) {
- console.log(page)
- if (response.tngou.length == 0) {
- $scope.hasmore = true;
- return;
- }
- page++;
- $scope.items = $scope.items.concat(response.tngou);
- }).finally(function (error) {
- isLock = false;
- $scope.$broadcast('scroll.infiniteScrollComplete');
- $scope.$broadcast('scroll.refreshComplete');
- });
- };
- $scope.doRefresh = function () {
- page = 1;
- $scope.items = [];
- $scope.loadMore();
- }
- })
3.代码解释
上面菜单部分使用了Tab组建,中间的列表部分使用SlideBox,并不存在任何嵌套,只是在各自选择的时候做一些处理。
- ion-refresher标签:下拉刷新的效果,下拉时触发doRefresh。
- ion-infinite-scroll标签:上拉加载的效果 。
- islock:锁,防止在网络慢的时候多次请求。
- hasmore:在最后一页的时候禁止触发加载更多。
[ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll的更多相关文章
- [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...
- [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- [ionic开源项目教程] - 第9讲 新闻详情页的实现
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- [ionic开源项目教程] - 第14讲 ionic解决跨域问题
[ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...
- [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...
- [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)
[ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...
- [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...
- [ionic开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现
第15讲 ionic用户个人中心登录注册的实现 这一讲包括登陆.注册.个人中心.个人资料页面的实现. 在一讲的改动有四个地方: 在config.js里配置接口地址 完善个人中心的服务层(service ...
- [ionic开源项目教程] - 第4讲 通Service层获取数据列表
第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...
随机推荐
- Java Api与HBase交互实例
import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hb ...
- HDOJ 1028 Ignatius and the Princess III (母函数)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- ZOJ3238 Water Ring(计算几何)
题意:给你一个圆形和很多个矩形,然后要你求圆形的圆周有多少被矩形覆盖. 思路:比赛的时候是有思路的了,不过一直在调别的题,最后剩下30分钟肯定来不及敲.想法是这样的,要是我们可以求出每个矩形覆盖了圆周 ...
- touch事件学习
window.onload = function(){ var touch = { movetarget : false, touchStart : function (e) { console.lo ...
- CPLD VS FPGA
FPGA(Field-Programmable Gate Array),即现场可编程门阵列,它是在PAL.GAL.CPLD等可编程器件的基础上进一步发展的产物.它是作为专用集成电路(ASIC)领域中的 ...
- SQL技术内幕-10 in和exists 性能比较
in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 一直以来认为exists比in效率高的说法是不准确的. 如果查询的两 ...
- group_concat
分割字符串 group_concat(a.EvidencesID separator ',') as EvidencesID #在MySQL配置文件(my.ini)中默认无该配置项,使用默认值时,值为 ...
- Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解(三)
前两章我为大家详细介绍了如何搭建Maven环境.Spring MVC的流程结构.Spring MVC与Struts2的区别以及示例中的一些配置文件的分析.在这一章,我就对示例的层次结构进行说明,以及M ...
- React-非dom属性-key
一.react性能 1.内容类似的尽量归到同一人组件,这样react不用每次都重新渲染 2.类似列表的内容,要加上key,可减少渲染次数 3.react渲染过程 二.代码 <!DOCTYPE h ...
- Centos环境下部署游戏服务器-Eclipse
一直在想这篇文章该不该写,因为这篇文章更像是教你如何使用一个ide这种文章,毫无价值可言.但思来想去还是应给写.上篇文章主要说了编译原理和过程,这篇文章就是理论联系实际的典范.并且很多工程师一辈子都不 ...