Vue 简单实现滚动到底部加载数据
最近想写个网站需要滚动加载的功能, 用了 element 的 infinite-scroll 感觉局限太大, 干脆自己写一个, 功能如下
image
原理
vue 实现滚动到底部加载数据的原理是监听页面滚动, 当页面滚动到底部的时候, 前端从后端获取分好页的数据加入到 datas[] 数组中, 进行渲染, 就实现了滚动加载的功能
先了解几个关键词:
(1) 滚动条到顶部的位置: scrollTop
(2) 当前窗口内容可视区: windowHeight
(3) 滚动条内容的总高度: scrollHeight
触发监听滚动条的函数是:
Windows.onscroll = ()=>{...}
判断到底部的等式: scrollTop+windowHeight=scrollHeight;
实现
我用的是 vue 脚手架搭的项目, 都写在 App.vue 文件里, 代码如下
App.vue 文件
{{data}}