Question

我使用http请求填充Ionic收集重复列表，但我不想将所有内容直接加载到DOM中。因此，我只显示一些项目，并在向下滚动时添加其余项目。为此，我实现了无限滚动功能。它应该显示一个微调器，当我到达页面的底部但它没有。这些项目至少会出现。

以下是代码：

HTML：

<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href=" http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-controller="MyCtrl">

    <ion-pane>
      <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Refresher testApp</h1>
      </ion-header-bar>
      <ion-content>
       <ion-refresher on-refresh="doRefresh()" spinner="bubbles"></ion-refresher>
      <ion-list>
        <ion-item class="item-thumbnail-left" collection-repeat="item in items | limitTo:numberOfItemsToDisplay">
        <img src="img/ionic.png" class="circle">
        <p>Link</p>
    <h2>{{item.id}}</h2>
    <h2>{{item.title}}</h2>
        </ion-item>
       <i class="icon ion-ios-arrow-right"></i>
        <ion-infinite-scroll
    on-infinite="addMoreItem()"
    distance="1%" spinner="bubbles">
  </ion-infinite-scroll>
      </ion-list>
      </ion-content>
    </ion-pane>
  </body>
</html>

App.js：

angular.module('ionicApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.factory('TweetService', function($http){
  var BASE_URL = "http://jsonplaceholder.typicode.com/posts";
  var items = [];



  return {
    GetFeed: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data;
        return items;
      });
    },
    GetNewTweets: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data;
        return items;
      });
    }
  }
})

.controller('MyCtrl', function($scope, $timeout, TweetService) {
  $scope.items = [];
  $scope.numberOfItemsToDisplay = 5;

  TweetService.GetFeed().then(function(items){
  $scope.items = items;
  });

   $scope.addMoreItem = function() {
        if ($scope.items.length > $scope.numberOfItemsToDisplay)
          $scope.numberOfItemsToDisplay += 5; // load 5 more items
        $scope.$broadcast('scroll.infiniteScrollComplete');
      };

  $scope.doRefresh = function() {
    TweetService.GetNewTweets().then(function(items){
      $scope.items = items;

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    });
  };

});

Answer 1

不幸的是，它还没有解决。无限滚动还有另外一个问题

https://forum.ionicframework.com/t/infinite-scrolling-and-collection-repeat-spinner-not-shown/14358

Answer 2

尝试使用它的代码片段......

//css
.my-spinner{
z-index: 99999999 !important;
position: absolute;
bottom:0px;
left:45%;
right:45%;
}


//template
<ion-infinite-scroll
    ng-if="!noMoreItemsAvailable"
    icon="ion-load-d"
    on-infinite="getpagenation()"
    distance="1%">
  </ion-infinite-scroll>

<div  ng-if="!noMoreItemsAvailable">
      <ion-spinner ng-show="ItemLoading" icon="ios" class="spinner spinner-ios my-spinner">
</div>



//js
$scope.getpagenation = function() {
        $scope.ItemLoading = true;
 //you can call services

 //have items
        $scope.ItemLoading = false;
 //no more items
        $scope.noMoreItemsAvailable = true;
        $scope.ItemLoading = false;
        $scope.$broadcast('scroll.infiniteScrollComplete');
}

离子旋转器没有出现

2 个答案: