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 ...
随机推荐
- XPlane android 2D手游开发实战
android 飞行射击游戏类 采用 xamarin 跨平台开发技术 纯C#语言编写 操作简单 1.手指拖动飞机 躲避敌机 2.通过吃敌机爆炸后遗落的物品增加各种属性 3.双击战机放大技能 4.目前 ...
- 使用netty4.x客户端接收较大数据量报文时发生的读取不完整bug修复记录
1.先说问题 背景:服务是运行在Linux上的安全网关提供的,TCP协议发送 通过二进制编码的xml字符串 报文,报文头的第一个字段是int类型的表示字节序标记,第二个字段是int类型的表示整个报文长 ...
- sqllite 默认当前日期写法
create table IF NOT EXISTS realpoint(_id integer primary key autoincrement,rountId varchar(50),lng d ...
- 【转】工控老鬼】西门子S7200入门&精通【1】S7200硬件大全
转载地址:http://blog.sina.com.cn/s/blog_669692a601016i5f.html 工控老鬼提醒以下的信息和资料可能不全或者不准确,如有疑问可以查阅西门子中国网 ...
- java中的23中设计模式(转)
设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- python-进程,线程,协程
1.进程和线程 进程定义:进程是正在运行的程序的实例,进程是内核分配资源的最基本的单元,而线程是内核执行的最基本单元,进程内可以包含多个线程,只要记住这三个要点,就可以很清楚的理清进程和线程的行为模 ...
- 如何配置pom.xml用maven打包java工程
最近由于项目需要,研究了一下maven的打包,项目要做到 1,生成3个目录/lib,/conf,/bin目录 2,把所有的jar目录编译.拷贝到/lib目录(包括maven的jar包和lib目录下的j ...
- 注释声明:TODO HACK XXX FIXME REVIEW
注释有时候也可以用来给一段代码声明额外的信息.这些声明的格式以单个单词打头并紧跟一个冒号.可以使用的声明如下. TODO: 说明代码还未完成.应当包含下一步要做的事情. HACK: 表明代码实现走了一 ...
- JavaACOFramework的各个类介绍(part3 : Ant4ACS类)
package aco.ant; import java.util.ArrayList; import sys.Settings; import util.PseudoRandom; import a ...
- C#自定义大小与改变大下的方法
在用VS的窗体设计器时,我们可以发现控件都是可以拖动的,并且还可以调整大小.怎么在自己的程序中可以使用上述功能呢? 下面的方法值得借鉴! using System; using System.Wind ...