Wiele przewijanych jonów zarówno z nieskończonym przewijaniem

Mam dwa znaczniki przewijania jonów. Wewnątrz każdego z tych znaczników przewijania jonów znajduje się lista. Każda z tych list zaczyna się od 10 elementów, a kiedy użytkownik dotrze do dolnej części określonego zwoju jonu, powinien załadować więcej. Problem, z którym się borykam, nie działa poprawnie. Jeśli przewinię pierwsze okno przewijania i zajdę do stronicowania wszystkich elementów, nie powinien mówić więcej treści. Nie dzieje się to jednak, jeśli zamiast tego przewinąć drugie okno przewijania, załaduję więcej przedmiotów w pierwszym i drugim oknie przewijania jonów (których nie chcę). Zasadniczo chciałbym, aby dwa zwoje jonów były całkowicie niezależne od siebie. Chciałbym, aby każdy załadował własną treść. Mam nadzieje że to miało sens. Oto moja codepen:Wiele przewijanych jonów zarówno z nieskończonym przewijaniem

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




});

Źródło

2016-02-01 user2924127

Czy ten problem został rozwiązany, ponieważ jestem również w obliczu tego problemu? – Pushpa

Mam podobną sytuację. Mam 1 widok to 2 listy jonowe i jak osiągnąć obie listy 2 mają swój własny nieskończony przewijanie jonów? – JimiOr2

Mając ten sam problem, ale zespół jonowy nie reaguje. Czy znalazłeś rozwiązanie? Https: //forum.ionicframework.com/t/multiple-ion-infinite-scroll/52895 –

Kwestia pochodzi od 'wymagają'^ionicScroll że nie został rozwiązany właściwie w? dyrektywa. Nie wiem dlaczego, ponieważ nie jestem ekspertem od AngularJS. To powiedziawszy, znalazłem obejście, które polega na wstawieniu dodatkowego elementu div wokół tagów treści, tak jak w przypadku http://codepen.io/priand/pen/PzYbZG, jeśli to pomaga komuś.

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

Źródło

2016-05-25 13:26:01

Wiele przewijanych jonów zarówno z nieskończonym przewijaniem

Odpowiedz

Powiązane problemy