Ionic 移动端 

<body ng-app="testApp">

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">左侧按钮</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">右侧按钮</button>
  </div>
</ion-header-bar>
<ion-content ng-controller="MyController">
  <ion-refresher
          pulling-text="下拉刷新..."
          on-refresh="doRefresh()">
  </ion-refresher>
  <p> 一些内容! </p>

  <div>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </div>
  <ion-infinite-scroll
          on-infinite="loadMore()"
          distance="1%"
          ng-if="moreDataCanBeLoaded()"
          icon="ion-loading-c"
          on-infinite="loadMoreData()">
  >
  </ion-infinite-scroll>
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">左侧按钮</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">右侧按钮</button>
  </div>
</ion-footer-bar>
<script type="text/javascript">
   angular.module('testApp', ['ionic'])
            .controller('MyController', function($scope, $http, $ionicScrollDelegate) {
              $scope.items = [1,2,3];
              $scope.scrollTop = function() {
                $ionicScrollDelegate.scrollTop();
              };
              $scope.doRefresh = function() {
                $http.get('/new-items')
                        .success(function(newItems) {
                          $scope.items = newItems;
                        })
                        .finally(function() {
                          // 停止广播ion-refresher
                          $scope.$broadcast('scroll.refreshComplete');
                        });
              };
            });
    function MyController($scope, $http) {
      $scope.items = [];
      $scope.loadMore = function() {
        $http.get('/more-items').success(function(items) {
          useItems(items);
          $scope.$broadcast('scroll.infiniteScrollComplete');
        });
      };

      $scope.$on('stateChangeSuccess', function() {
        $scope.loadMore();
      });
    }

</script>
</body>
 

　　

　　

posted @ 2016-10-09 11:47  墨纸瀚云  阅读(248)  评论(0)    收藏  举报