ionic 的下拉刷新 与 上拉加载
<ion-view view-title="消息通知">
<ion-content class="padding">
<!-- <ion-refresher> 下拉刷新指令 -->
<ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
<div class="list card" ng-repeat="message in vm.messages" >
<div class="item item-divider item-icon-right">{{message.title}}
<i class="icon" ng-click="vm.show(message)" ng-class="message.static?'ion-arrow-down-b':'ion-arrow-right-b'"></i></div>
<div class="item item-body">
<div>
{{message.static?message.content:message.content.substr(0, 40)}}
</div>
</div>
</div>
<!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时,就禁止执行on-infinite -->
<ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
</ion-content>
</ion-view>
1. on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast('scroll.refreshComplete');
2. on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast('scroll.infiniteScrollComplete');
js代码
angular.module('starter.controllers', [])
.controller('InfoCtrl', function($rootScope, $timeout, $interval, $scope, $http, services) {
var vm = $scope.vm = {
moredata: false,
messages: [],
pagination: {
perPage: 5,
currentPage: 1
},
init: function () {
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = data;
})
},
show: function (message) {
if (message.static) {
message.static = false;
} else {
message.static = true;
}
},
doRefresh: function () {
$timeout(function () {
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
},
loadMore: function () {
vm.pagination.currentPage += 1;
services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
vm.messages = vm.messages.concat(data);
if (data.length == 0) {
vm.moredata = true;
};
$scope.$broadcast('scroll.infiniteScrollComplete');
})
}
}
vm.init();
})
此处的messages 是view显示的数据,pagination是做分页加载显示的参数,service是我封装的$http服务,show方法是view信息显示的开关(这些都可以不用注意)!
有不清楚的,可以提问!本人也是新手,大家一起共同学习进步!
ionic 的下拉刷新 与 上拉加载的更多相关文章
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- Android之下拉刷新,上啦加载的实现(一)
转载地址http://blog.csdn.net/leehong2005/article/details/12567757#t5 前段时间项目中用到了下拉刷新功能,之前在网上也找到过类似的demo,但 ...
- react + iscroll5 实现完美 下拉刷新,上拉加载
经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...
- iOS MJRefresh下拉刷新(上拉加载)使用详解
下拉刷新控件目前比较火的有好几种,本人用过MJRefresh 和 SVPullToRefresh,相对而言,前者比后者可定制化.拓展新都更高一点. 因此本文着重讲一下MJRefresh的简单用法. 导 ...
- SVPullToRefresh 下拉刷新,上拉加载
https://github.com/Sephiroth87/ODRefreshControl 类似刷新控件,类似qq动画的那种刷新. 一.下载第三方库 https://github.com/samv ...
- 微信小程序开发之 下拉刷新,上拉加载更多
本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...
- iOS开发 XML解析和下拉刷新,上拉加载更多
iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...
- ListView下拉刷新、上拉载入更多之封装改进
在Android中ListView下拉刷新.上拉载入更多示例一文中,Maxwin兄给出的控件比较强大,前面有详细介绍,但是有个不足就是,里面使用了一些资源文件,包括图片,String,layout,这 ...
- google官方的下拉刷新+自定义上拉加载更多
转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...
- iscroll 下拉刷新,上拉加载
新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><me ...
随机推荐
- DP专题训练之HDU 1864 最大报销额
做DP一定要注意数组的大小,嗯,就是这样~ Description 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过10 ...
- sax xpath读取xml字符串
public static void main(String[] args) throws ParserConfigurationException, SAXException, IOExceptio ...
- 设置myeclipse新建jsp文件默认编码为UTF-8
有三个地方需要改编码设置: 1. window-->preference-->general-->contenttype 然后在content types中展开每一个子项,并在Def ...
- IOS UITableview代理方法总结
tableview的datasource代理 @required的两个数据源方法 1.返回每个 session 中 cell 的个数 - (NSInteger)tableView:(UITableVi ...
- disable_irq与disable_irq_nosync使用场景
disable_irq与disable_irq_nosync使用场景 Linux设备驱动,关于中断屏蔽有两个接口:disable_irq和disable_irq_nosync,该两接口使用场景 ...
- 函数对象(仿函数 functor)
简单地说,函数对象就是一个重载了()运算符的类实例,它可以像一个函数一样使用. #include <iostream> using namespace std; class Add { p ...
- python基础 Day01 练习题
1 字符串格式化 #!/urs/bin/env python name = input("Name: ") age = int(input("Age: ")) ...
- \r与\n的区别
\r : return 到当前行的最左边. \n: newline 向下移动一行,并不移动左右. Linux中\n表示回车+换行: Windows中\r\n表示回车+换行. Mac中\r表示回车+换行 ...
- Java知识积累1-StringAlign实现文字居中左右对齐
import java.text.*;public class StringAlign extends Format{ public static final int JUST_LEFT='l'; / ...
- windows PHONE 开发-入门程序构筑
1:页面的扩展名为:.xaml文件类似于ASPX一样可以编写客户端显示内容和后台处理内容 一般的前台页面的形式为: <Page x:Class="MyFirstApp.MainPage ...