angular5 下拉加载更多

做到一个web聊天，需要制作一个类似下拉分页的功能，大致思路如下：

1. 安装插件 ngx-infinite-scroll

2. 

<div #chatScroll scrollSpyElement="chat" class="chat-detail c-scroll-y-a message-wrap"

infinite-scroll

[infiniteScrollDistance]="2"

[infiniteScrollUpDistance]="2"

[scrollWindow]="false"

(scrolled)="onScrollDown()"

(scrolledUp)="onScrollUp()">

    <div *ngFor="let msg of data"> 

        <div>msg</div>

    </div>

</div>






  onScrollDown() {
    // 上拉
    console.log('scrolled!!');
  }

  onScrollUp() {
    // 下拉
    console.log('scrolled up!!');

    // http的请求。。。。
    this.getChatDataList(true);
    
    this.scrollToTop();
  }

// 获取客服聊天信息
getChatDataList(isTop ?: boolean) {

  let pageNo = !isTop ? 1 : this.chatDataList.pageNo + 1;

  this.http.getData(pageNo, this.chatPageSize).subscribe((res: any) => {
    if (!isTop) {
      // 请求 第一页数据
      this.scrollToBottom();
    } else {
       // 请求 其他分页数据
      if (this.chatDataList.data.length < res.data.total) {
        var tempData = res.data.data;
        for (let i = 0; i < tempData.length; i++) {
          const element = tempData[i];
          this.chatDataList.data.unshift(element);
          console.log('this.chatDataList.length', this.chatDataList.data.length);
        }
      }
    }
  });
}