IONIC：無法加載`ion-infinite-scroll`中的動態內容

我是新的離子框架。目前我正在ionicsidemenu應用程序上工作。IONIC：無法加載`ion-infinite-scroll`中的動態內容

我有100個記錄，我想一次顯示20條記錄。向下滾動時會獲得下20條記錄。爲此，我正在使用ion-infinite-scroll，但我無法理解如何調用下20條記錄。我正在使用webservice獲取記錄。

請幫幫我。

2017-04-24 Nupur

IONICS文檔在提供使用示例方面做得很好：https：//ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/。如果適用，請記下waitFor方法。 – treavg

在這種情況下，您必須使用數組而不是對象，因爲在數組中推入項比推入對象更容易。離子文檔也在他們的例子中使用數組。

查看：

<div ng-repeat="item in data">...</div> 
<ion-infinite-scroll (ionInfinite)="getData()"> 
    <ion-infinite-scroll-content></ion-infinite-scroll-content> 
</ion-infinite-scroll>

控制器：

$scope.data = []; 
var page = 1; 
$scope.getData = function(){ 
    $http.get('http://example.com?page='+page).then(function(response){ 
     page++; 
     $.each(response,function(key,item){ 
      $scope.data.push(item); 
     }); 
    }, function(error){ 

    }); 
}

當滾動達到離子無限滾動功能將被調用。在開始時屏幕上沒有數據，因此沒有滾動離子無限滾動功能自動調用加載第一頁。

來源

2017-04-24 18:05:13

非常感謝你@sharad我會盡力讓你知道。 :) – Nupur

我試過這個，但是getData（）沒有調用，如果我在'ng-init =「getData（）;''內調用getData（）;''在它加載數據的離子內容中，但是當滾動沒有任何反應時。 – Nupur

使用limitTo與無限滾動。 AngularJS ng-repeat從版本1.1.4提供了limitTo選項。我略微調整了無限滾動指令，使得在不具有窗口高度100％的容器內進行滾動。

ng-repeat="item in items | orderBy:prop | filter:query | limitTo:limit"

注意limit是$ scope中的一個變量，所以改變它會自動調整渲染項的數量。而遞增限制，只會呈現添加的元素。

<table> 
    <tr ng-repeat="d in data | limitTo:totalDisplayed"><td>{{d}}</td></tr> 
</table> 
<button class="btn" ng-click="loadMore()">Load more</button> 

//the controller 
$scope.totalDisplayed = 20; 

$scope.loadMore = function() { 
    $scope.totalDisplayed += 20; 
}; 

$scope.data = data;

或嘗試這個溶液

<body> 
    <pane ng-controller="MainCtrl"> 
     <header-bar title="'Infinite Scroll Example'"> 
      </header-bar> 
     <content has-header="true" padding="true" on-infinite-scroll="addMoreItem"> 
      <div class=" list padding"> 
      <div ng-repeat="item in items | limitTo:numberOfItemsToDisplay" class="item" type="item-text-wrap"> 
       <h3>{{item}}</h3> 
      </div> 
      </div> 
     </content> 
    </pane> 

    </body>

js代碼

angular.module('myApp', ['ionic']) 
    .controller('MainCtrl', function($scope) { 
     $scope.numberOfItemsToDisplay = 20; // number of item to load each time 
     $scope.items = getData(); 

     function getData() { 
     var a = []; 
     for (var i=1; i< 1000; i++) { 
      a.push(i); 
     } 

     return a; 
     } 
     $scope.addMoreItem = function(done) { 
     if ($scope.items.length > $scope.numberOfItemsToDisplay) 
      $scope.numberOfItemsToDisplay += 20; // load 20 more items 
     done(); // need to call this when finish loading more data 
     } 

    });

，而在滾動顯示20個項目。

來源

2017-06-09 05:11:54 Pritish

非常感謝你的答覆。當用戶觸摸頁面底部的自動調用loadmore函數時，我需要獲取out事件的內容。可能嗎？ – Nupur

我更新了答案@NupurJain plz檢查出來。我沒有測試過它。 – Pritish

或者你也可以使用UI-Scroll https://rawgit.com/angular-ui/ui-scroll/master/demo/chat/chat.html – Pritish

IONIC：無法加載`ion-infinite-scroll`中的動態內容

回答

相關問題