做到一个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);
}
}
}
});
}