培训生前端开发日记 part2 滚动条监控加载更多数据

-2022.1.13
项目中遇到了数据量过大，页面无法加载的问题，经过协商，后端将数据写成了分段分页的形式，之后我就可以每次仅加载一部分数据，分次显示在页面上。

第一种

方法是我手写的，当时在vantui中没有注意到vantui的自带方法。
一：获取数据，请求数据中有page代表当前请求的页数。获取到res为需要的数组
二：为了将该数据渲染在页面上，我在data中添加了list数组，将获取的数据conset进list数组，之后渲染在页面上。

this.list=  this.list.concat(res);
//此处添加数据应使用concat，push是将该数组直接添加至list中，concat则会拼接两个数组。

三：之后进行对滚动条的监控

//首先获取需要监控的容器
data（）{
  return{
    scrollDom: document.getElementById("app"),
  }
}
//获取需要的参数
      var 滚动条顶端距容器顶端的距离 = this.scrollDom.scrollTop;
      var 滚动条的高度 = this.scrollDom.clientHeight;
      var 容器的高度 = this.scrollDom.scrollHeight;
//使用计时器setInterval间隔一段时间获取以上数据
// 若 '滚动条顶端距容器顶端的距离' + '滚动条的高度' >= '容器的高度' 则说明滚动条已经到底。
//此时将page + 1，重新调取接口，获取下一页的数据并将数据conset至list中，页面重新渲染，容器的高度被撑开，则滚动条已不再底部。

第二种

方法为vant ui所带的方法，版本号为2.12.39
该方法只需在 onload 中更改传输的数据调取接口请求数据即可