Question

我试图在我的应用中实现无限滚动，但我发现了困难。目前我的json文件中有30条记录，当页面加载时，每个数据都显示在数据上。我想要实现的是在页面上加载它只显示5个数据当用户滚动到按钮时无限滚动接管并加载另外5个数据并继续重复。

HTML

$scope.hide = ($scope.hide) ? false : true;

JS

<ion-content> 

         <div class="list card has-subheader" ng-repeat="item in feeds track by item.u_pic_id">

  <div class="item item-avatar">
    <img src="../usr_up_img/{{item.profile_pix}}">
    <h2><a class="mylinks" href="#/tab/source/{{item.profile_id}}">{{item.fname}}&nbsp;{{item.lname}}</a></h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="../images/{{item.profile_pix}}">
    <p>
      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
      the content is from a card-body consisting of an image and paragraph text. The footer
      consists of tabs, icons aligned left, within the card-footer.
    </p>

    <p>
      <a href="#" class="subdued">{{item.love_total}} Loves</a>
      <a href="#" class="subdued">{{item.com_total}} Comments</a>
    </p>
  </div>

</div>

<ion-infinite-scroll
    on-infinite="loadmore()"
    distance="1%">
  </ion-infinite-scroll>


      </ion-content>

有关如何使其正常工作的任何帮助？

Answer 1

试试这个

.controller('feedsctrl',['$scope','$http',function($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('http://localhost/myapp/app_ion/feeds.php').success(function(items) {
      $scope.items.push(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  }; 
  $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
  });

}])

这是一个例子http://codepen.io/elm/pen/Becqp 如果您需要更多帮助doc

带有角度的无限滚动 - 加载x每个用户的数据量滚动到底部

1 个答案: