複数のイオンスクロールと無限スクロールの両方

イオンスクロールタグが2つあります。これらのイオンスクロールタグのそれぞれには、リストがあります。これらのリストはそれぞれ10個のアイテムから始まり、ユーザーが特定のイオンスクロールの一番下に到達すると、それ以上の負荷がかかるはずです。私が直面している問題は、これが正しく動作していないということです。最初にスクロールしてすべての項目にページを設定すると、それ以上の内容は表示されません。しかし、これは起こりません。代わりに、2番目のスクロールウィンドウをスクロールすると、1番目と2番目のイオンスクロールウインドウに多くのアイテムがロードされます（これは必要ありません）。本質的には、2つのイオンスクロールをお互いに完全に独立させたいと思います。私はそれぞれがそれ自身のコンテンツを読み込むようにしたいと思います。私はそれが理にかなったことを望む。ここに私のcodepenは次のとおりです。複数のイオンスクロールと無限スクロールの両方

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(); 




});

出典

2016-02-01 user2924127

この問題は解決されていますか？ – Pushpa

私も同様の状況があります。私は1ビューは2イオンリストを含むと2リストの両方を達成する方法は、それが自分のイオン - 無限スクロールですか？ – JimiOr2

同じ問題を抱えていますが、イオンチームは反発しません。解決策がありますか？https：//forum.ionicframework.com/t/multiple-ion-infinite-scroll/52895 –

問題がで正しく解決されない^ ionicScroll '必要' から来ています指令。なぜ私はAngularJSの専門家ではないので、わかりません。つまり、http://codepen.io/priand/pen/PzYbZGのように、コンテンツタグの周りに余分なdivを挿入するという回避策が見つかりました。私もこの問題に直面していますので、

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

出典

2016-05-25 13:26:01

複数のイオンスクロールと無限スクロールの両方

答えて

関連する問題