虚拟加载 vue-virtual-scroller 解决大数据加载过多，卡顿问题

项目场景：

手机端数据过200条，input框点击输入就卡死！原因加载的节点太多了！
思路：页面显示的数据只有少部分，其他的都隐藏掉！

---

解决方案：vue-virtual-scroller 解决加载过多，卡顿问题

安装命令

npm install --save vue-virtual-scroller

main.js引入 注意css文件引入，不然页面上需要import组件，样式才起作用

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VueVirtualScroller from 'vue-virtual-scroller'
Vue.use(VueVirtualScroller);

RecycleScroller 使用 需要设定高度
注意：

1. key-field，默认值是id
2. items就是你的数据源
3. RecycleScroller外层，需要设置高度
4. 需要设定每个item的高度，item-size
5. 设计原理，计算滚动条的位置，不在屏幕的item，设置transform，移走
6. 缺点，每个item，设置高度，有的item高度不够，会有空