ionic-refresher/infinite(上拉/下拉刷新更新数据)

ionic-refresher/infinite(上拉/下拉刷新更新数据)

1、refresher

　　允许你添加下拉刷新滚动视图。 把它作为 ionContent 或 ionScroll 元素的第一个子元素。 当刷新完成时，从控制器中广播（ $broadcast ）出 'scroll.refreshComplete'事件。

2、infinite-scroll

　　当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。

　　当用户滚动的 距离 超出底部的内容时，就会触发你指定的 on-infinite 。

示例代码如下：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body>
11     <ion-header-bar>
12         <h1 class="title">Header</h1>
13     </ion-header-bar>
14     <ion-content ng-controller="myCtr">
15         <p>下拉刷新</p>
16         <ion-refresher
17                 pulling-text="下拉刷新"
18                 on-refresh="doRefresh()">
19         </ion-refresher>
20         <ul class="list list-inset">
21             <li class="item" ng-repeat="temp in list">
22                 {{temp}}
23             </li>
24         </ul>
25         <ion-infinite-scroll
26                 on-infinite="doInfinite()"
27                 immediate-check="false"
28                 >
29         </ion-infinite-scroll>
30     </ion-content>
31     <ion-footer-bar>
32         <h1 class="title">Footer</h1>
33     </ion-footer-bar>
34 <script>
35     var app = angular.module('myApp', ['ionic']);
36     app.controller('myCtr',['$scope','$timeout',function($scope,$timeout){
37         $scope.list = [0,1,2,3,4];
38         $scope.doRefresh=function(){
39             $scope.list.push($scope.list.length);
40 // 停止广播ion-refresher
41             $scope.$broadcast('scroll.refreshComplete');
42         }
43         $scope.doInfinite = function(){
44             $timeout(function(){
45                 $scope.list.push($scope.list.length);
46             },3000)
47 // 停止广播ion-infinite
48             $scope.$broadcast('scroll.infiniteScrollComplete');
49         }
50     }]);
51 </script>
52 </body>
53 </html>

 

posted @ 2017-01-09 19:09  时间脱臼  阅读(149)  评论(0)    收藏  举报