vô số cuộn vô hạn

Question

Tôi đang cố gắng để có được ionInfiniteScroll để hoạt động - Tôi đã làm cho nó hoạt động ở một số nơi khác trong ứng dụng của tôi, và trang này thực sự gần giống với một trang khác đang hoạt động tốt . Khi tôi cuộn xuống không có gì xảy ra, không tải đồ họa. Tôi có một thông báo console ngay bên trong phương thức doInfinite của mình và nó không bao giờ thực thi ... do đó mã doInfinite không bao giờ thực thi. Tôi nghĩ có lẽ có cái gì đó sai với cấu trúc html vì phương pháp này không thực hiện:

<ion-content no-padding> 
    <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"--> 

    ... 

    <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of promotions" no-padding> 
     <div class="feedtoptextcontainer"> 
     <!--<div class="imageparent"> 
      <img class="postprofilepic" src="{{a.url}}"> 
     </div>--> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
     </div> 
     <h3 class="promotitle">{{a.title}}</h3> 
     <div class="desccontainer"> 
      <h4 class="deal">{{a.caption}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </div> 

    ... 

    <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item> 
</div> 

phương pháp mã doInfinite:

doInfinite(infiniteScroll) { 
    console.log("in doinfinite promotionsssssss"); 
    setTimeout(() => { 
     console.log('Begin async operation'); 
     /*console.log(this.content.directionY + "  upupupupupupu********"); 
     if(this.content.directionY == 'up') { 
     this.show = false 
     } 
     else { 
     this.show = true; 
     }*/ 

     console.log(this.startAtKey1 + "  before %%^&^&^% start at"); 
     this.list2 = this.af.list('/promotions', { 
     query: { 
     orderByKey: true, 
     endAt: this.startAtKey1, 
     limitToLast: 11 
     }}); 

     this.subscription11 = this.list2.subscribe(items => { 
      let x = 0; 
      this.lastKey1 = this.startAtKey1; 
      items.forEach(item => { 


      let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png'); 

      storageRef.getDownloadURL().then(url => { 
       console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!"); 
       item.customMetadata.picURL = url; 
      }).catch((e) => { 
       console.log("in caught url !!!!!!!$$$$$$$!!"); 
       item.customMetadata.picURL = 'assets/blankprof.png'; 
      }); 

      if(this.startAtKey1 !== item.$key && this.lastKey1 !== item.$key) { 
       console.log(this.startAtKey1 + " :startAtKey1 before 4444444  item key:  " + item.$key); 
       this.promotions.push(item.customMetadata); //unshift?************** 
      } 

      if(x == 0) { 
       this.startAtKey1 = item.$key; 
      } 

      x++; 
      });   

     }) 

     infiniteScroll.complete(); 

    }, 500); 
    } 

CẬP NHẬT

Tôi nghĩ một điều quan trọng cần lưu ý là tôi đang sử dụng 5 danh sách khác nhau trông giống như một danh sách dưới đây ... tất cả trên cùng một trang (tôi chỉ bao gồm 2 bên dưới - đó là những gì tôi đã thử nghiệm lần cuối cùng) . Trong đó, ... có trong mã, có 4 danh sách khác giống như danh sách bạn thấy ở trên. Tất cả đều được kèm theo trong <div> 's như trên - và không ai trong số họ được bao giờ được hiển thị cùng một lúc - Tôi nghĩ rằng tôi nên gửi toàn bộ <ion-content> thứ chỉ trong trường hợp được can thiệp với nhau:

<ion-content no-padding> 
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"--> 



    <!--<ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
    </ion-refresher>--> 


    <div class ='availability contentone' #availability [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let z of availabilities" no-padding (tap)="presentProfileModal(z.salon, z.time)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{z.pic}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{z.salon}}</h4><br> 
      <h4 class="poststudio">{{z.time}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    </div> 

    <div class ='distance contentone' #distance [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let z of distances" no-padding (tap)="presentProfileModalDistance(z.salon)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{z.pic}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{z.salon}}</h4><br> 
      <h4 class="poststudio">{{z.distance}} mi</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    </div> 

    <div class ='ratings contentone' #ratings [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of rating ; let i = index" no-padding (tap)="presentProfileModalRatings(a.username)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{a.picURL}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
      <h4 class="poststudio">{{a.stars}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    </div> 

    <div class ='price contentone' #price [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of pricesArray" no-padding (tap)="presentProfileModalPrice(a.username)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{a.picURL}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
      <h4 class="poststudio">{{a.price}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="doInfiniteP($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </div> 

    <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of promotions" no-padding> 
     <div class="feedtoptextcontainer"> 
     <!--<div class="imageparent"> 
      <img class="postprofilepic" src="{{a.url}}"> 
     </div>--> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
     </div> 
     <h3 class="promotitle">{{a.title}}</h3> 
     <div class="desccontainer"> 
      <h4 class="deal">{{a.caption}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </div> 

    <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item> 
</div> 
</ion-content> 

Tôi chuyển danh sách vào và ra bằng cách sử dụng renderer như renderer.setElementStyle(el, 'display', 'none) or block.

Answer 1

Hóa ra là xung đột css mà tôi đã có trên .scroll-content. Dường như nếu bạn thêm css vào .scroll-content, ion-infinite-scroll sẽ ngừng hoạt động.