在正文之前，先对虚拟列表做个简单的定义。根据上文，虚拟列表是按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。

常用写法是用 Arrary.prototype.map 方法，将数组形式的数据映射为 JSX.Element 数组，并嵌入到组件要返回的 JSX.Element 中，如下：

比如 umy-ui (ux-table)虚拟列表table组件， vue-virtual-scroller 以及 react-virtualized 这些优秀的插件快速满足业务需要。为了理解插件背后的原理机制，我们实现一个自己简易版的虚拟列表，希望在实际业务项目中能带来一些思考和帮助。

某天闲着无聊想练一下手速，去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后，是列表居然出现了白屏。看了一下控制台：

多选列表 （Multi-Select） 是一种将所有选项列出，并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素。这是一种常见的设计元素。有时候为了节省空间，我们会将选项折叠于 Combo Box 中

在我们平时的业务开发中经常会用到文案超出只有收起，点击在展示全部文案；通常的使用时使用css来实现

实际上用了overflow:hidden 会影响 list-style，即当ul 中的li 的overflow 为hidden的时候， list-style不起作用，不显示前面的点、圈等样式。

无序列表使用标签：<ul>,<li>属性：disc，circle，square；有序列表使用标签：<ol>，<li>属性：A，a，I，i，start；嵌套列表使用标签：<ul>，<ol>，<li> ；自定义列表使用标签：<dl>，<dt>，<dd>

使用外层容器切割：给每一个 li 设定右边框和下边框线，使用CSS选择器此方法仅适用于每行固定显示两个li的情况，不需要计算宽高，也不需要设置父容器。使用table通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框