ionic 的下拉刷新 与 上拉加载
2015-07-07 10:10
281 查看
<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信息显示的开关(这些都可以不用注意)!
有不清楚的,可以提问!本人也是新手,大家一起共同学习进步!
相关文章推荐
- C#开发Unity游戏教程之Scene视图与脚本的使用
- 多工程运行于同一个tomcat下问题
- Java保留两位小数的几种做法
- Listener refused the connection with the following error: ORA-12505, TNS:listener does not currently
- iOS下划线/虚线/删除线等等
- MOAC 配置
- SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
- android studio上的百度定位的初始化
- Unity 3D知识体系结构
- ExtJs 下拉菜单分页工具插件 代码分析
- 鼠标滑动到指定位置时div固定在头部
- 【jQuery插件】-----页面滚动时动画wow.js
- 关于java使用jacob调用word,ppt,excel等的转化为html的问题
- 替代test语句的[ ]和[[ ]]表达式有什么区别
- linux scp限速传输
- 调用虚拟内存编译时的error处理
- 各种构建工具的优缺点对比
- 数据挖掘笔记
- 关于文档保存格式 new Variant()
- 一切成功源于积累——20150706 外汇经典之跳空窗口回补 欧美跳空 窗口回补 二回目