Sonsuz kaydırma ile birden fazla iyon kaydırması

İki iyon kaydırma etiketim var. Bu iyon kaydırma etiketlerinin her birinin içinde bir liste var. Bu listelerin her biri 10 maddeyle başlar ve bir kullanıcı belirli bir iyon kaydırmanın altına ulaştığında daha fazla yüklenmelidir. Karşılaştığım problem bu doğru çalışmıyor. İlk kaydırma penceresini kaydırırsam ve tüm öğelerle sayfalara ayrılırsa, daha fazla içerik söylememelidir. Bununla birlikte, bunun yerine ikinci kaydırma penceresini kaydırırsam, ilk ve ikinci iyon kaydırma penceresinde (istemediğim) daha fazla öğe yükler. Esasen iki iyon kaydırmasının birbirinden tamamen bağımsız olmasını istiyorum. Her birinin kendi içeriğini yüklemesini isterim. Umarım bu mantıklıdır. İşte benim codepen geçerli:Sonsuz kaydırma ile birden fazla iyon kaydırması

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: Sorun gelen

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




});

kaynak

2016-02-01 user2924127

bu sorun çözüldü mü? – Pushpa

Ben de benzer durumum var. Ben 1 görünüm var 2 iyon listesi ve 2 listenin her ikisi de kendi iyon-sonsuz kaydırma var nasıl var? – JimiOr2

Aynı konuya sahip olmakla birlikte, iyonik takım yanıt vermiyor. Bir çözüm buldunuz mu? Https: //forum.ionicframework.com/t/multiple-ion-infinite-scroll/52895 –

^ionicScroll 'gerektiren' düzgün çözülmezse direktif. AngularJS uzmanı olmadığından neden emin değilim. Bu, içerik etiketlerinin etrafında ek bir boşluk eklenmesiyle ilgili bir çözüm buldum. Bu, birine yardımcı olursa http://codepen.io/priand/pen/PzYbZG'da olduğu gibi. Ben de bu durumla karşı karşıyadır ediyorum çünkü

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

kaynak

2016-05-25 13:26:01

Sonsuz kaydırma ile birden fazla iyon kaydırması

cevap

İlgili konular