<app-pull-to-refresh class="items-box" (refreshChange)="tapRefresh()" (moreChange)="tapMore()" [more]="hasMore" [loading]="isLoading">
    <ng-container *ngFor="let item of items">
        <dl class="book-item" (click)="tapItem(item)">
            <dt>
                <a >{{ item.title }}</a>
                <span class="book-time">{{ item.created_at }}</span></dt>
                <dd>
                    <p>{{ item.description }}</p></span>
            </dd>
        </dl>
    </ng-container>
</app-pull-to-refresh>

123456789101112

  @ViewChild(PullToRefreshComponent)
  public pullBox: PullToRefreshComponent;

    public tapRefresh() {
    this.goPage(1);
  }

  public tapMore() {
    if (!this.hasMore) {
        return;
    }
    this.goPage(this.page + 1);
  }

  public goPage(page: number) {
    if (this.isLoading) {
        return;
    }
    this.isLoading = true;
    this.pullBox?.startLoad();
    this.service.getPage({
      page
    }).subscribe(res => {
      this.page = page;
      this.hasMore = res.paging.more;
      this.isLoading = false;
      this.items = page < 2 ? res.data : [].concat(this.items, res.data);
      this.pullBox?.endLoad();
    }, () => {
      this.isLoading = false;
      this.pullBox?.endLoad();
    });
  }

123456789101112131415161718192021222324252627282930313233

@HostListener('scroll', [
    '$event.target.scrollTop',
    '$event.target.scrollHeight',
    '$event.target.offsetHeight',
  ])
  public onDivScroll(
    scrollY: number,
    scrollheight: number,
    offsetHeight: number,
  ): void {
    const height = scrollheight;
    const y = scrollY + offsetHeight;
    if (this.more && y + this.distance > height) {
      // 触发加载更多
    }
  }

12345678910111213141516