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

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

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

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

减少页面元素

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来撑开顶部高度

秒客网