You are here

React Ionic infinite scroll example

g089h515r806 的头像
Submitted by g089h515r806 on 星期二, 2019-10-29 09:28

  I try to use infinite scroll component in Ionic (React) project, but there is no document about how to use it, for the official document, it said that ionic react does not support infinite scroll yet. But in source code, it exists. Then I try to fixed it by myself, here is the sample code that I use, it works well:



class Reports extends React.Component<Props, State> {
  ionInfiniteScrollRef: React.RefObject<HTMLIonInfiniteScrollElement>;
  constructor(props: Props) {
     this.ionInfiniteScrollRef = React.createRef<HTMLIonInfiniteScrollElement>();
    this.state = {
      items: [],
         hasMore: true,
      //showPopover: false,
      //showPopoverEvent: null
  componentDidMount() {
  loadMoreItems = () =>{
      if (this.ionInfiniteScrollRef.current) {
<IonContent color="primary" >
  <IonInfiniteScroll threshold="50px" ref={this.ionInfiniteScrollRef}  onIonInfinite={this.loadMoreItems}>
      loadingText="Loading more data...">      


Several key points:

1, put IonInfiniteScroll after your list.

2, ref={this.ionInfiniteScrollRef}, using Ref to get the instance of IonInfiniteScroll

3, complete it using code “this.ionInfiniteScrollRef.current.complete(); “ in loadMoreItems. Complete method could not be called when componentDidMount.



1, 是IonInfiniteScroll列表放在列表的下面,

2, 使用ref=这个属性,获取当前的IonInfiniteScroll

3,   完成的代码调用“this.ionInfiniteScrollRef.current.complete(); “,我开始尝试把它放在loadItems这个函数里面,loadItems这个函数在componentDidMount里面调用了,这种情况下,会报没有.complete方法。我将它移出来,放在loadMoreItems,解决了这个问题。