Vue.js 一个超长列表无限滚动加载的解决方案

时间:2024-04-04 07:07:50

vuejs 列表渲染出商品,点击添加按钮,怎么让当前列表的数量增加?
https://segmentfault.com/q/1010000009235184

力荐35个最好用的Vue开源库! https://github.com/opendigg/awesome-github-vue

Vue.js 一个超长列表无限滚动加载的解决方案
https://juejin.im/entry/5819993fbf22ec0068aab054
代码及演示 https://hejx.herokuapp.com/vue-list/
源码:https://github.com/hejianxian/vue-list/blob/master/src/components/vue-list.vue
Vue.js 一个超长列表无限滚动加载的解决方案

提供一种在数据量大的情况下,对列表的滚动加载进行优化的解决方案。

首先,为何要对数据量大的列表页进行滚动加载优化呢?
主要的一个原因就是

页面上元素太多了,滚动的时候会有卡顿的问题,移动端上更为明显。

减少页面元素

OK,假设现在列表的元素结构是酱紫的:

< ul class="list">
   < li class="item">...< /li>
  ...
< /ul>

那么现在有几个问题要解决的:

什么时候开始删除元素,什么时候把删了的元素显示回来
被删了的元素会导致高度减少,怎样保持总高度不变
如何确保列表元素显示在应该出现的位置
什么时候开始加载新数据

Vue.js 一个超长列表无限滚动加载的解决方案

我们先把列表的元素结构改一下:

< div class="content">
  < ul class="list">
    < li class="item">...< /li>
    ...
  < /ul>
< /div>

为啥要改成这样呢?
首先,我们是要删除元素的,为了保持总高度不变
我们要把ul这个元素的高度设为所有item加起来的总高度,那此时列表的screen就是类名为content的div元素了,也就是说
整个ul列表是在叫content的这个div里滚动

怎样保持ul的总高度不变?
1: 对ul设置总高度,然后显示item进行相对定位
2: 在列表的开始和结尾各放一个元素来撑开高度(本列子使用的方法)
3: 和方法1差不多,使用padding或者margin来撑开顶部高度