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>中，就像上面那样 - 并且它们都没有同时显示 - 我想我应该发布整个<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

我发现css上有.scroll-content的冲突。如果您向css添加.scroll-content，ion-infinite-scroll似乎停止工作。

离子 - 无限涡旋发射非常不频繁

1 个答案: