vue2 虚拟列表（优化版）

作用：

虚拟列表是优化长列表的一种手段，防止列表存在过多的dom元素导致页面卡顿（包扣移动端下拉到底加载下一页这种列表加载的dom元素多了一样会卡）。

原理：

如上图简单地说就是以 <div class=''list-view">作为固定窗口用来展示看到的数据。

用<div class="list-view-phantom">来撑起固定窗口的高度来出现滚动条。

用<ul class="list-view-content">来存放数据，并且让他随着滚动条一起动，达到视觉上的列表滚动。

优化的问题：

在基础虚拟列表的基础上优化了如下几点

1.根据rem动态计算每一条数据在页面中对应的height和margin。

2.当窗口的resize事件触发一切数值都重新计算，让列表底部样式不出错，和滚动到底部不抖动。

3.向下滚动加载下一条数据时候卡在计算阈值内，导致底部留白太大，通过至多加载固定窗口对应展示数据的数量给追加到原本的结尾索引，达到多渲染一屏窗口的数据。

4.加载数据到最后显示暂无更多数据文案。

5.自动滚动到指定数据项的位置。

6.页面不停快速刷新导致获取不到固定窗口高度和滚动到指定位置不起作用。

实现如下：

<template>
    <div ref="listView" class="list-view"  @scroll="handleScroll">
       <div class="list-view-phantom" :style="{height: `${contentHeight}px`}"></div>
       <ul class="list-view-content" ref="content" >
           <li class="list-vie