ionic4滑動加載（ion-infinite-scroll）

效果圖如下：

并不是此代碼的結果，下面代碼隻是我源碼的部分，但應該夠用了。

<ion-list lines="none" inset="true" class="listfen" *ngFor="let record of pressRecordList; index as i;">
        <ion-item>
            <span style="width:80%">
                <span *ngIf="record.integral >= 0 ">
                    <img src="../../../assets/imgs/dianZan.1.png">&nbsp;&nbsp;
                    {{record.signInfo}}
                </span>
                <span *ngIf="record.integral < 0 ">
                    <img src="../../../assets/imgs/kulian.png">&nbsp;&nbsp;
                    {{record.signInfo}}
                </span>
                <br>
                <span class="updateTime">{{record.pressTime}}</span>
            </span>
            <p style="width:20%; padding-left:5%">{{record.integral}}分</p>
        </ion-item>
    </ion-list>
    <!-- 顯示正在加載。。。 -->
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="150px">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加載更多...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
	 <!-- 如果isend為true，顯示沒有更多内容 -->
    <div [hidden]="!isend">
        <ion-row>
            <ion-col class="nodata" text-center>
                沒有更多内容啦 ♪(^∇^*)
            </ion-col>
        </ion-row>
    </div>
```ts
//窗體加載觸發的事件
    queryPressRecord(InfiniteScroll) {
        const dataUrl = '...略 + '/' + this.pagenum + '/' + this.pagesize;      
        const that = this;
        this.http.get(dataUrl).subscribe(
        res => {
            ...略
            //如果是最後一頁，則isend 标記為true，然後再取出isFirstPage 
            if (res.json().data.data.isLastPage === true) {
                this.isFirstPage = res.json().data.data.isFirstPage;
                this.isend = true;                   
            }       
             // 當頁面多餘1頁時滑到頂部的按鈕顯示
            if (that.pagenum > 1) {
                 this.totop = true;
             }
             that.pagenum++;   
			//每次重新整理完，都把正在重新整理隐藏起來     
            if (InfiniteScroll) {
                InfiniteScroll.target.complete();
                if (res.json().data.data.isLastPage) {
                    InfiniteScroll.target.disabled = false;
                }
            }
            略
        }
    }
    //執行下拉重新整理
    doInfinite(infiniteScroll) {
    //如果是第一頁，則隐藏ion-infinite-scroll，即“正在加載更多”
        if (this.isFirstPage) {
            infiniteScroll.target.complete();
            infiniteScroll.target.disabled = false;
        } else {
         //如果不是第一頁，則繼續重新整理（調用queryPressRecord（方法））
            this.queryPressRecord(infiniteScroll);
        }
    }

```html
<!-- 上面的ion-list 和ion-item 可以換長div，個人感覺更友善調樣式 -->
   <div class="div1" *ngFor="let item of libraryDetailList">
        <div>
            <span style="float:left">#{{item.bookName}}</span>
            <span style="float:right">{{item.result}}</span>
        </div>
    </div>