Question

我是离子框架的新手。目前我正在研究((<script type)[\s\S]*?('body')[\s\S]*?|(var msgs)[\s\S]*?(</script>)[\s\S]*?)|(var msgs)[\s\S]*?([}];)[\s\S]*?|(('timestamp')[\s\S]*?('body')[\s\S]*?|('timestamp')[\s\S]*?(blog-admin)[\s\S]*?)|[:,;'}{\]\[]|pid-\d+ app。

我有100多条记录，我希望一次显示20条记录。向下滚动时获得下一条20条记录。为此，我使用ionicsidemenu，但我无法理解如何拨打下20条记录。我正在使用webservice来获取记录。

请帮帮我。

Answer 1

在这种情况下，您必须使用数组而不是对象，因为在数组中推送项目比推入对象更容易。离子文档在其示例中也使用数组。

查看：

<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){

     });
}

当滚动到达离子无限滚动功能时将调用。在开始时屏幕上没有数据，所以没有滚动离子无限滚动功能自动调用加载第一页。

Answer 2

使用limitTo和无限滚动。 AngularJS ng-repeat从版本1.1.4提供limitTo选项。我略微调整了Infinite Scroll指令，使得容器内的滚动可能没有高度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 code

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个项目。

IONIC：无法在`ion-infinite-scroll`中加载动态内容

2 个答案: