[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 ...
随机推荐
- json_encode charset
json_encode utf-8 mysql charset utf8
- Http Url Get请求方式需要对中文参数进行编码
public static void main(String[] args) { try { String mytext = java.net.URLEncoder.encode("上海南站 ...
- [初级教程]用SecureCRT+Xming轻松远程实现Linux的X DISPLAY
[初级教程]用SecureCRT+Xming轻松远程实现Linux的X DISPLAY 发布者:sqqdugdu 时间:10-06 阅读数:2117 测试环境:RHEL 6.1,SecureCRT 5 ...
- iOSpush过后返回多级界面
有导航控制器push过后pop可以反回上一个界面,然而我们需要返回多级界面有下面两种方法 调用API - (NSArray *)popToViewController:(UIViewControlle ...
- 2014多校第一场 E 题 || HDU 4865 Peter's Hobby (DP)
题目链接 题意 : 给你两个表格,第一个表格是三种天气下出现四种湿度的可能性.第二个表格是,昨天出现的三种天气下,今天出现三种天气的可能性.然后给你这几天的湿度,告诉你第一天出现三种天气的可能性,让你 ...
- POJ2402/UVA 12050 Palindrome Numbers 数学思维
A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example,the ...
- VISO下载地址
http://pan.baidu.com/share/home?uk=4011207371#category/type=0
- python unittest基本介绍
python内部自带了一个单元测试的模块,pyUnit也就是我们说的:unittest 1.介绍下unittest的基本使用方法: 1)import unittest 2)定义一个继承自unittes ...
- C# winform post请求数据
刚到公司混的时候,老板要求实现一个从C#的windows应用程序传参数到一个网页,然后这个网页不显示出来,但能把数据返回给应用程序的功能,问了好多人,找了好多资料,都搞不定,后来还是在老板的帮助下搞定 ...
- hibernate初次配置问题
1.自动创建表结构 在hibernate.cfg.xml配置文件中修改 <property name="hibernate.hbm2ddl.auto">update&l ...