ionic 上滑加载更多数据

虽然说这个问题困扰了我很久，但是最终算是解决了，整理一下写到这里

html

  <ion-infinite-scroll threshold="15%" (ionInfinite)="loadData(infiniteScroll)">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="努力加载中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

解释：
threshold： 这个是鼠标位于底部多少距离时触发后面的loadData(infiniteScroll)这个事件，可以写成100px等形式

loadingSpinner： 释放时的加载图标

loadingText： 释放时加载的文字

ts

 @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
 loadData(infiniteScroll) {
      setTimeout(() => {
      
        // 不要小看这句话，这是相当于让此事件结束的一个标志，如果少了的话就只能进行一次，别问我怎么知道的，都懂
        infiniteScroll.complete();
        
        // 如果加载的页数和记录的总页数相等则表示记录已经全部显示，禁用无线滚动
        if (this.page=== this.RecordPage) {
          infiniteScroll.disabled = true;
          // 将标识改为true；（记住这个后面会用）
          this.IsLastPage = true;
        } else {
          this.page++;
		 //  这里是你加载数据的方法
        }
      }, 500);
    }

接下来是“底线”
给用户的友好提示，当记录加载完毕的时候，这里的IsLastPage就是上面ts写到的标志

 <!-- 页面滑动加载完毕后提示 -->
      <div [hidden]="!IsLastPage" >
        <ion-row>
            <ion-col text-center>
              ———————— 我是有底线的 ————————
            </ion-col>
        </ion-row>
    </div>

只是一个小demo，具体的格式可以去看官网的格式
传送门：ionic 官网

其中的逻辑还是得自己去解，加油吧