Question

我只需要在我的应用程序中执行ajax无限滚动，所以我在离子框架中使用了无限滚动。

我的jquery控制器代码。

$scope.moredata = false;
$scope.page = 1;
$scope.loadMoreData=function()
{
  $http.get('someurl?page='+$scope.page).
    success(function(data, status, headers, configure) {
        $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.page += 1;
        $scope.product = data;
    }).
    error(function(data, status, headers, config) {
        alert("error");
    });
};

我的HTML代码。

<ion-content>
    <ion-list>
        <ion-item class="item item-thumbnail-left" ng-repeat="(key,value) in product" href="#/app/playlists/{{playlist.id}}">
            <img ng-src={{value.image_url}}>
            <h2>{{value.name}}</h2>
            <p>Sku : {{value.sku}}</p>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll distance="20%" on-infinite="loadMoreData()" ng-if="!moredata"></ion-infinite-scroll>
</ion-content>

当我使用上面的代码时，我从服务器获得了page1值并将其添加到我的离子列表中但是当我向下滚动页面2请求发送并且我得到了响应但是列表视图没有被添加它的覆盖也是滚动事件不会停止它调用page3，page4等，而不会转到屏幕的末尾。

任何人都可以帮助我如何在离子框架中使用无限滚动来通过页面方式动态地从服务器获取数据，并在最后滚动时附加响应。

提前致谢。

Answer 1

你的问题就在那一行：

  $scope.product = data;

您没有合并结果，而是覆盖您的结果。由于我不知道您的数据是如何构建的，因此很难建议您合并的方法

您可以在此处看到有关建议的帖子：https://stackoverflow.com/a/17243064/3687474

带有$ http的无限滚动进入离子框架

1 个答案: