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>