首页 > 代码库 > ionic pull to refresh 下拉更新頁面
ionic pull to refresh 下拉更新頁面
有些項目都用到了下拉更新頁面的效果;
1. 在index.html 中添加ion-refresher 指令 且在我們需要更新內容的外面 添加 如
<ion-refresher pulling-text=" pull to reflesh" on-refresh="doReFresh()"> </ion-refresher> <ion-list> <ion-item ng-repeat="list in lists">{{list.name}}</ion-item> </ion-list>
<ion-refresher></ion-refresh> 指令中 pulling-text 屬性就是我們在下拉時顯示的文字, on-refresh 用於處理下拉時我們的數據處理 的函數(向服務器請求數據 ,添加新的內容)
2. 添加控制器 1 <ion-content ng-controller="refleshCtr">
3. 在app.js 中控制器的
1 .controller("refleshCtr",function($scope){ 2 $scope.lists=[ 3 {name:"list1"}, 4 {name:"list2"} 5 ] 6 $scope.doReFresh=function(){ 7 $scope.lists.unshift({name:"pull to refresh add list3"}); 8 $scope.$broadcast(‘scroll.refreshComplete‘); 9 $scope.$apple()10 }11 })
定義了數組lists ;下拉時調用doReFresh函數 ,$scope.lists.unshift({name:"pull to refresh add list3"}); 向數組插入了一條數據;
注意:
$scope.$broadcast(‘scroll.refreshComplete‘); // 廣播下拉更新完成 使list 數組可以正常使用
$scope.$apple()//在頁面中顯示
ionic pull to refresh 下拉更新頁面
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。