离子3无限滚动不工作，直到内容滚动到顶部，然后底部

我想加载一些更多的数据在离子3项目。无限的滚动只是第一次。然后停止工作，直到页面滚动到顶部，然后滚动到底部。离子3无限滚动不工作，直到内容滚动到顶部，然后底部

这里是我的代码

HTML

<ion-content> 
    <ion-scroll style="width:100%;height:100vh" scrollY="true"> 
     <ion-list *ngIf="posts.length>0"> 
      <button *ngFor="let post of posts" ion-item> 
     <ion-thumbnail item-start> 
      <img [src]="getPostImage(post)"> 
     </ion-thumbnail> 
     <h2>{{ post.title.rendered }}</h2> 
    </button> 
     </ion-list> 
     <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
      <ion-infinite-scroll-content loadingText="Loading..."></ion-infinite-scroll-content> 
     </ion-infinite-scroll> 
    </ion-scroll> 
</ion-content>

打字稿

doInfinite(infiniteScroll) { 
    this.getCategoryPosts(infiniteScroll); 
} 

getCategoryPosts(infiniteScroll=null){ 
     this.api.getCategoryPosts({ 
     id : this.topic.id, 
     limit : this.limit, 
     page:this.page, 
     success:(posts)=>{ 
      this.zone.run(()=>{ 
      if(this.page >1){ 
       this.posts = this.posts.concat(posts); 
      }else{ 
       this.posts = posts; 
      } 
       this.page++; 
       if(infiniteScroll!=null) 
        infiniteScroll.complete(); 
      }); 

     }, 
     error:(error)=>{ 
      console.log(error); 
     } 
     }); 

    }

来源

2017-09-29 shah

<ion-infinite-scroll>也绝对不是好内部<ion-scroll style="width:100%;height:100vh" scrollY="true">至少以下离子3个版本的工作，：

$ ionic info 

cli packages: (./node_modules) 

    @ionic/cli-utils : 1.19.0 
    ionic (Ionic CLI) : 3.19.0 

local packages: 

    @ionic/app-scripts : 3.0.0 
    Cordova Platforms : android 6.2.3 ios 4.4.0 
    Ionic Framework : ionic-angular 3.9.2

内<ion-scroll>面积height100vh则需要向上滚动到顶部，然后才能触发下一无限滚动的事件。 height的其他值导致相同的问题。

我最好的猜测是，<ion-scroll>区域的所需高度设置与添加的无限滚动项目的内容大小更改发生冲突。

如果你可以用一个完全滚动<ion-content>生活，在你的<ion-list>足够员额项目为达到无限滚动threshold distance可以彻底删除<ion-scroll>。

这是唯一的解决方案，为我工作！

来源

2017-11-29 18:10:52 Marvin

我发现了另一种解决方案，如果你不想列出屏幕的全高（100vh）。将<ion-scroll>的高度设置为70vh，然后在每次成功的无限滚动时，当新项目添加到列表中时，将4vh添加到<ion-scroll>元素的高度。

所以有：

scrollHeight += 4; 
 
document.getElementById('list-scroll').setAttribute('style', 'height:' + scrollHeight + 'vh');

它没有本质：

<ion-scroll id="list-scroll" style="height: 70vh">

然后，一旦新项目是由您的组件加载他们有多重要你做多高<ion-scroll>

来源

2018-01-26 15:00:53

离子3无限滚动不工作，直到内容滚动到顶部，然后底部

回答

相关问题