vue 实现数据滚动显示_Vue 简单实现滚动到底部加载数据

Vue 简单实现滚动到底部加载数据

最近想写个网站需要滚动加载的功能, 用了 element 的 infinite-scroll 感觉局限太大, 干脆自己写一个, 功能如下

image

原理

vue 实现滚动到底部加载数据的原理是监听页面滚动, 当页面滚动到底部的时候, 前端从后端获取分好页的数据加入到 datas[] 数组中, 进行渲染, 就实现了滚动加载的功能

先了解几个关键词:

(1) 滚动条到顶部的位置: scrollTop

(2) 当前窗口内容可视区: windowHeight

(3) 滚动条内容的总高度: scrollHeight

触发监听滚动条的函数是:

Windows.onscroll = ()=>｛...}

判断到底部的等式: scrollTop+windowHeight=scrollHeight;

实现

我用的是 vue 脚手架搭的项目, 都写在 App.vue 文件里, 代码如下

App.vue 文件

{{data}}