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 ...
随机推荐
- Class.forName()用法及与new区别
平时开发中我们经常会发现:用到Class.forName()方法.为什么要用呢? 下面分析一下: 主要功能Class.forName(xxx.xx.xx)返回的是一个类Class.forName(xx ...
- d20161012
Milk-run 供应商信息维护 基本信息,电子围栏 外部订单导入[或者录入页面] 订单基本信息,载具信息,物料信息,备注(外协还是华为导入订单,订单内容是否内部投递一样,是否需要导入附加,导入后是否 ...
- python 学习笔记十八 django深入学习三 分页,自定义标签,权限机制
django Pagination(分页) django 自带的分页功能非常强大,我们来看一个简单的练习示例: #导入Paginator>>> from django.core.p ...
- Android 开机自启服务
package com.example.lenovo.guangbo; import android.app.Service; import android.content.Intent; impor ...
- redis 常用配置
参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式 ...
- 微信小程序-视图视图引用
引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...
- sublime使用小技巧——自动保存后缀名与自动匹配语法
1,打开sublime 2,新建文件 3,ctrl+shift+p 4,输入ss(set syntax),在下拉列表中选择需要的语言 列表很多,可以输入相关快捷键 如:html-->ssh cs ...
- 关于json-p
关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...
- js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能
html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...
- css3——新盒子定义box-sizing
css3对盒子有了新定义,以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 wid ...