ionic基础组件使用：上拉触底加载更多数据、下拉刷新

准备工作：加载网络服务

app.module.ts文件：

上拉触底加载更多数据

https://ionicframework.com/docs/api/infinite-scroll

组件的app.component.ts文件：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { InfiniteScrollCustomEvent } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  res: Result = {
    first: 0,
    prev: 0,
    next: 0,
    last: 0,
    pages: 0,
    items: 0,
    data: []
  }

  url = 'http://localhost:8888/ka?_page='

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<Result>(this.url + 1).subscribe(res => {
      // console.log(res)
      this.res = res
    })
  }

  loadData(e: InfiniteScrollCustomEvent) {
    console.log('触底')

    // 下一页
    let nextPage
    if (this.res.next) {
      nextPage = this.res.next
    } else {
      nextPage = this.res.last + 1
    }

    // 加载更多数据  
    this.http.get<Result>(this.url + nextPage).subscribe(res => {
      // 拼接已有的数据数组和新的数据数组
      res.data = this.res.data.concat(res.data)
      this.res = res

      // 加载更多结束后，必须通知 加载更多 组件，此次操作已结束，可以监听下一次触底
      e.target.complete()
    })
  }
}

interface Result {
  first: number,
  prev: number,
  next: number,
  last: number,
  pages: number,
  items: number,
  data: Item[]
}

interface Item {
  date: string,
  id: string,
  money: number,
  type: string,
  useFor: string
}

组件的app.component.html文件：

下拉刷新

https://ionicframework.com/docs/api/refresher

在上拉触底加载更多的基础上增加该功能。

组件app.component.html文件增加如下红框中的部分：

组件app.component.ts文件增加如下红框中的部分：
增加导入：

增加函数doRefresh：

下拉：