ionic4滑动加载（ion-infinite-scroll）

版权声明：喜欢可以转载，但是必须注明出处。技术要分享，专利要维护。 https://blog.csdn.net/wzcyamadie/article/details/86248607

效果图如下：
并不是此代码的结果，下面代码只是我源码的部分，但应该够用了。

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