vue中如何基于后端实现列表滑动分页展示？

笔者的项目有一个模块，是关于展示工作报告的，并且多个列表需要基于后端的分页，提供滑动更新展示的效果，网上查找了许多现有的懒加载插件，都是基于图片实现的懒加载。想必用过vant这个框架的同学们又有意见了，vant有现成的列表懒加载功能，但是需要注意的是(前方高能！！！！)，vant的列表懒加载是基于你的第一页列表，也就是源数据不会改变的情况下，才适用的，如果你需要匹配上模糊查询的功能，你的源数据是经常改变的，GG！一切都是徒劳了！所以，笔者思前想后，还是基于DOM自己封装吧，不知道同学们有没有更好的一些解决方案，有的话请留言。我的解决方案是这样的（废话不多说，直接贴代码）：`
自写前端分页封装
this.previous = Date.now()
// 方法封装(需要后端配合分页并且返回totalPage和totalCount)
slicePages(此处省略若干个参数，可自行定义......)  // 获取滚动条到列表底部的高度
this.scrollDistance = domName.scrollHieght - domName.scrollTop - domName.clientHieght;
this.now = Date.now();
// 当滚动条到列表底部的高度小于等于60px的时候触发// 每次触发的时候由于列表拓展底部高度会变高，至>60pxif (this.scrollDistance <= 60) {
// 结束条件1：列表长度大后台返回的数据总数时 结束
if (this[listName].length >= this[totalCount]) return;
// 结束条件2： 当前页大于等于总页数时 结束
if (this[currentPage] >= this[totalPage]) return;
// 满足节流条件时触发
if (this.now - this.previous > 80) {
if (!this.loading) {
this[currentPage] += 1;
this.loading = true;
......(ajax部分)queryReportInfo({...(若干参数)}).then((res)=>{
if (this[listName].length < this[totalCount]) {
const addList = res.data.data.list;
// 拼接列表
addList && (this[listName] = this[listName].concat(addList));
this.loading = false;}})
this.previous = this.now;}}}}`
By the way: 这个方法的引用可以放在周期函数updated中，因为滑动会改变data中的参数，然后会出发updated这个周期函数，从而实现列表的更新渲染。