ion-infinite-scroll 极少发射

Question

我正在尝试让 ionInfiniteScroll 正常工作 - 我已经让它在我的应用程序的其他几个地方正常工作，而且这个页面实际上几乎与另一个正常工作的页面相同。当我向下滚动时没有任何反应，没有加载图形。我的 doInfinite 方法内部有一条控制台消息，它从不执行……所以 doInfinite 代码从不执行。我在想 html 结构可能有问题，因为该方法没有执行：

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

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

更新

我认为另一件需要注意的重要事情是我使用了 5 个不同的列表，它们看起来像下面的列表......都在同一页面上（我只包含下面的 2 个 - 这是我上次测试的). ... 在代码中的位置，还有 4 个列表，如您在上面看到的那样。它们都包含在 <div> 中，就像上面那个一样 - 而且它们中的 none 永远同时显示 - 我想我应该 post 整个 <ion-content>以防万一事情互相干扰：

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

我使用 renderer 像 renderer.setElementStyle(el, 'display', 'none) or block 一样切换列表。

Answer 1

原来我在 .scroll-content 上的 css 有冲突。似乎如果您将 css 添加到 .scroll-content，ion-infinite-scroll 将停止工作。

ion-infinite-scroll 极少发射

ion-infinite-scroll firing extremely infrequently

html

infinite-scroll

typescript

ionic2

angular