ionic 下拉刷新
2015-08-21 12:47
330 查看
Ionic提供了非常简单的指令来实现下拉刷新。首先,我们需要在列表前加一个标签
我们可以定义下拉刷新时显示的字体,以及对应的操作,这里是调用doRefresh();下面我们看一下js里面怎么控制
这里我们实现上面标签里的doRefresh来更新数据,注意,在数据更新完成后要$broadcast广播一个scroll.refreshComplete的事件,这个事件是让ion-refresher知道刷新已经完成,可以隐藏自己了
<body ng-app="ionicApp"> <ion-header-bar class="bar-energized"> <h1 class="title">Pull to Refresh!</h1> </ion-header-bar> <ion-content ng-controller="TodosCtrl"> <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()"> </ion-refresher> <ion-list> <ion-item ng-repeat="todo in todos">{{todo.name}}</ion-item> </ion-list> </ion-content> </body>
我们可以定义下拉刷新时显示的字体,以及对应的操作,这里是调用doRefresh();下面我们看一下js里面怎么控制
var app = angular.module('ionicApp', ['ionic']) app.controller('TodosCtrl', function($scope) { $scope.todos = [ {name: "Do the dishes"}, {name: "Take out the trash"} ] $scope.doRefresh = function() { $scope.todos.unshift({name: 'Incoming todo ' + Date.now()}) $scope.$broadcast('scroll.refreshComplete'); $scope.$apply() }; })
这里我们实现上面标签里的doRefresh来更新数据,注意,在数据更新完成后要$broadcast广播一个scroll.refreshComplete的事件,这个事件是让ion-refresher知道刷新已经完成,可以隐藏自己了
相关文章推荐
- 我国所有制结构的调整完善
- 关于mysql inner join 连接查询的优化
- 数据结构笔记(郝斌主讲)(2015-11-26 22:16:36更新完毕)
- XMU1016 Magic Square【幻方构造】
- 文字跑马灯
- 用户指南接口
- C#中的属性(get、set、value)
- 网页宽度自动适应手机屏幕宽度的方法
- 欢迎使用CSDN-markdown编辑器
- C#中的属性(get、set、value)
- SQL-SQL基础
- 图论05——经典Dijkstra算法
- 重新认识我国所有制结构
- word2vec纯程序+注释
- 2014 找工作总结
- IOS设备上修改原deb解包 打包-教程
- kafka-storm-stater研究
- git 撤销分支删除 操作 (git delete branch undo)
- LeetCode "Graph Valid Tree"
- TIOBE(2015.8):Java、C和C++持稳前三,OC依然在Top 5之外