Fork Me On Github

使用

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

refreshChange 下拉刷新事件

moreChange 加载更多事件

more 是否有更多

loading 是否加载中

distance 触底距离

  @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();
    });
  }

推荐使用方法通知,虽然 loading 也可以,但是如果加载没有时间间隔的话,是不起作用的。

startLoad 指定开始加载

endLoad 指定加载完成

监听滚动事件

@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) {
      // 触发加载更多
    }
  }

缺点

第一次不能自动加载,如果有更多,但没有滚动条,也不会自动加载更多

具体代码

请查看【GITHUB

标签: angular
点击查看全文
0 9 0