码迷,mamicode.com
首页 > 其他好文 > 详细

ionic pull to refresh 下拉更新頁面

时间:2014-10-11 14:29:15      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   使用   java   sp   div   on   

有些項目都用到了下拉更新頁面的效果;

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 下拉更新頁面

标签:style   blog   color   io   使用   java   sp   div   on   

原文地址:http://www.cnblogs.com/xieyier/p/4018583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!