Scorrimento ionico multiplo entrambi con scorrimento infinito

Ho due tag scroll ion. All'interno di ciascuno di questi tag scroll ionici c'è una lista. Ognuno di questi elenchi inizia con 10 elementi e quando un utente raggiunge il fondo di un particolare scroll ionico dovrebbe caricarne altri. Il problema che sto affrontando è che questo non funziona correttamente. Se sfoglio il primo, scorre la finestra e impagina tutti gli elementi, non dovrebbe contenere più contenuto. Tuttavia, ciò non accade, ma se si scorre la seconda finestra di scorrimento, caricherà più elementi nella prima e seconda finestra di scorrimento dello ione (che non desidero). In sostanza vorrei che i due scroll ionici fossero completamente indipendenti l'uno dall'altro. Vorrei che ognuno caricasse il proprio contenuto. Spero che abbia senso. Qui è la mia codepen:Scorrimento ionico multiplo entrambi con scorrimento infinito

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




});

fonte

2016-02-01 user2924127

È questo il problema risolto perché sto anche di fronte a questo problema? – Pushpa

Anche io ho la situazione simile. Ho 1 visualizzazione include 2 elenchi di ioni e come ottenere entrambe le 2 liste hanno il proprio ione-infinito-scroll? – JimiOr2

Avere lo stesso problema ma il team ionico non è in grado di rispondere. Sei venuto con una soluzione? Https: //forum.ionicframework.com/t/multiple-ion-infinite-scroll/52895 –

Il problema deriva dal 'require'^ionicScroll che non viene risolto correttamente nel? direttiva. Non so perché, dato che non sono un esperto di AngularJS. Detto questo, ho trovato una soluzione alternativa che consiste nell'inserire un ulteriore div attorno ai tag dei contenuti, come in http://codepen.io/priand/pen/PzYbZG, se questo aiuta qualcuno.

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

fonte

2016-05-25 13:26:01

Scorrimento ionico multiplo entrambi con scorrimento infinito

risposta

Problemi correlati