多个离子滚动都具有无限滚动答案

【问题标题】：Multiple ion-scroll both with infinite scroll多个离子滚动都具有无限滚动
【发布时间】：2016-05-10 12:21:10
【问题描述】：

我有两个离子滚动标签。每个 ion-scroll 标签内部都有一个列表。这些列表中的每一个都以 10 个项目开始，当用户到达特定离子滚动的底部时，它应该加载更多。我面临的问题是这完全不能正常工作。如果我滚动第一个它滚动窗口并分页所有项目，它应该说没有更多的内容。但是，这不会发生，相反，如果我滚动第二个滚动窗口，那么它将在第一个和第二个离子滚动窗口中加载更多项目（我不想要）。本质上，我希望两个离子卷轴彼此完全独立。我希望每个人都加载自己的内容。我希望这是有道理的。这是我的代码笔：

http://codepen.io/polska03/pen/jWKRwP

HTML：

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-app="ionicApp" ng-controller="MyCtrl" class="background-places">

    <ion-view>
    <ion-content class="" scroll='false'>
        <ion-scroll style="height:50%">
            <ion-list>
                <ion-item collection-repeat="list in _list">
                    <h2>Item</h2>
                </ion-item>
            </ion-list>
            <button class="button button-full button-outline button-positive" ng-if="noMoreContent">
      No more Content
   </button>
            <ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%">
            </ion-infinite-scroll>
        </ion-scroll>

<hr>
<hr>

        <ion-scroll style="height:50%">
            <ion-list>
                <ion-item collection-repeat="list2 in _list2">

                    <h2>Item</h2>

                </ion-item>
            </ion-list>



            <button class="button button-full button-outline button-positive" ng-if="noMoreContent2">
       No More Content
     </button>
            <ion-infinite-scroll ng-if="canWeLoadMoreContent2()" on-infinite="populateList2()" distance="1%">
            </ion-infinite-scroll>
        </ion-scroll>

    </ion-content>

</ion-view>


  </body>
</html>

Javascript：

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

  .controller('MyCtrl', function($scope) {






  $scope._list = [];

  $scope.populateList = function() {
    for (var i = 0; i <= 9; i++) {


      $scope._list.push({});
    }
    console.log($scope._list.length);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  }

  $scope.noMoreContent = false;

  $scope.canWeLoadMoreContent = function() {
    if($scope._list.length > 15) {
      $scope.noMoreContent = true;

      return false;
    }else{
      return true;
    }
  }
  $scope.populateList();





  $scope._list2 = [];

  $scope.populateList2 = function() {
    for (var i = 0; i <= 9; i++) {



      $scope._list2.push({});

    }
    console.log($scope._list2.length);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  }

  $scope.noMoreContent2 = false;

  $scope.canWeLoadMoreContent2 = function() {
    if($scope._list2.length > 15) {
      $scope.noMoreContent2 = true;

      return false;
    }else{
      return true;
    }
  }



  $scope.populateList2();




});

【问题讨论】：

这个问题解决了吗，因为我也面临这个问题？
我也有类似的情况。我有 1 个视图，包括 2 个离子列表，如何实现这两个列表都有自己的 ion-infinite-scroll？
有同样的问题，但 ionic 团队没有响应。你有解决方案吗？forum.ionicframework.com/t/multiple-ion-infinite-scroll/52895
不抱歉，我不得不重新设计我的应用程序的这个组件，因为我必须在发布之前生产一个产品，并且当时还没有研究这个。我很快会再次调查它，如果我发现任何东西，我会在这里发布答案。我很幸运在幻灯片上将高度设置为 auto ，但如果我没记错的话，它使幻灯片的高度都相同（所有幻灯片的高度都是最大幻灯片的高度），这导致一些幻灯片的内容较少有很多空白区域可以滚动。

标签： javascript angularjs pagination ionic-framework

【解决方案1】：

问题来自指令中未正确解决的 'require' ?^ionicScroll。不知道为什么，因为我不是 AngularJS 专家。也就是说，我找到了一种解决方法，即在内容标签周围插入一个额外的 div，如http://codepen.io/priand/pen/PzYbZG，如果这对某人有帮助的话。

<div>
<ion-content class="has-header col col-50">
  <ion-list>
    <ion-item ng-repeat="item in items" 
              item="item">
      Item {{ item.id }}
    </ion-item>
  </ion-list>
  <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</div>

<div>
<ion-content class="has-header col col-offset-50 col-50">
  <ion-list>
    <ion-item ng-repeat="item in items2" 
              item="item">
      Item {{ item.id }}
    </ion-item>
  </ion-list>
  <ion-infinite-scroll ng-if="!noMoreItemsAvailable2" on-infinite="loadMore2()" distance="10%"></ion-infinite-scroll>      
</ion-content>
</div>

【讨论】：