Vue-封装简易的长列表虚拟滚动组件(含触底加载数据)

虚拟滚动的理解

既可以滚动加载,也不会额外增加DOM数量,随着滚动变化原有几个DOM元素的值

思考

1. 容器该如何布局 ?

2. 如何动态变化可视区域内dom的值 ?

3. 滚动条的长度如何控制?

4. 如何判断上拉触底了 ?

列表容器的布局

1. 新建一个组件ListScroll,容器内部含:滚动条盒子、展示的列表盒子、加载提示盒子

2. 注意最外层的容器viewport高度设置100%,让父组件去决定ListScroll组件的高度

3. 注意让展示的列表盒子绝对定位铺满容器viewport,滚动条的盒子高度需要动态计算

4. 监听容器viewport的滚动,要动态设置列表盒子的translateY属性,让盒子往上移动

动态变化展示数量内的dom元素的值

1. 涉及到的元素的几何属性:容器的viewport的offsetHeight高度,容器的viewport的scrollTop滚动的高度

2. 这个方案需要设置每行数据的高度的 rowHeight

3. 定义startIndex和endIndex,用来截取数据的

4. 通过容器的viewport的scrollTop滚动的高度 / 每行的高度,能获得当前的startIndex

5. 列表展示的数据,是展示源数据通过startIndex和endIndex截取后的数据

滚动条的长度

滚动条的长度 = 源数据的长度 * 每行的高度

判断上拉触底

监听滚动时,当容器的viewport的offsetHeight高度 + 容器的viewport的scrollTop滚动的高度 等于 列表的总长度 则表示触底了

完整代码的实现

ListScroll组件

// components/ListScroll.vue





页面引入ListScroll组件





总结

个人感觉这种长列表虚拟滚动的方案,也是很适用于平常的列表触底加载业务,以往很多同学都是通过pageSize设置为10来只先渲染10条数据,导致频繁的的下拉会多次发送请求。通过这种方案,我们可以一次性先获取50条的数据,但是控制只在页面展示10个DOM元素,这是不是也巧妙的减少了发送请求获取数据的次数了呢 ?

~~ end ~~

你可能感兴趣的:(vue.js,前端,javascript)