前端实现列表无限滚动分页

项目中有一个ul列表用来展示数据。如图

由于接口的入参pageSize:1000,一次性获取1000数据。随着数据量增加，接口返回数据的时间增加，会出现加载很慢的问题，用户看起来像是卡顿了。

于是就想到了用前端来实现分页效果。页面加载完毕只请求10条数据，垂直方向的滚动条到达一定位置页面就加1，每页10条得来获取下一页的数据。代码如下。

html：

<ul class="alarm-body">
     <li *ngFor="let item of data" class="list-item">
         <div class="center-info"> 
             这里是每一个卡项
         </div>
     </li>
</ul>

js：

const scrollEle = this.el.nativeElement.querySelector('.alarm-body');
        if (scrollEle) {
        this.source = fromEvent(scrollEle, 'scroll').subscribe((e: any) => {
            if (e.target.clientHeight + e.target.scrollTop >= e.target.scrollHeight && this.alarmRadioValue != 'ALARM_APPEAR') {
                this.increasePage++;
                    if (this.increasePage <= Math.floor(this.pagesTotal / 10)) {
                        const pageSize = this.pagesTotal - this.increasePage * 10;
                        const options = {
                            page: this.increasePage,
                            pageSize: pageSize > 0 && pageSize < 10 ? pageSize + 10 : 10,
                        };
                        this.getAlarmList(options);
                    } else {
                        return;
                    }
                }
            });
        }

说明：

1. 这是在angular框架下实现的，不用完全一样，但是可以借鉴。
2. this.el.nativeElement.querySelector('xxx') 只是angualr中获取dom元素的一种方式，等于 document.querySelector('xxx');
3. fromEvent是rxjs中的一个操作符，可以将事件转换成observable序列。fromEvent(scrollEle, 'scroll').subscribe(）等于 scrollEle.addEventListener('scroll',functionName);
4. clientHeight：元素的可见区域高，scrollHeight：可见区域+不可见区域的高，scrollTop：元素的内容向上滚动的像素数
5. increasePage是会自增的页码，pagesTotal是接口返回的数据总条数。