> 最近项目中需要用到列表的展示，且不分页。当数据加载太多时会造成性能问题。因此采用虚拟列表来优化 ## 一、虚拟列表 **真实列表**：每条数据都展示到html上，数据越多，`DOM`元素也就越多，性能也就越差。 **虚拟列表**：只展示部分数据（可见区域展示数据），当屏幕滚动时替换展示的数据，`DOM`元素的数量是固定的，相比较真实列表更高效。 ## 二、实现思路 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/045ae11ca67a4e7285f8eb0661c39841~tplv-k3u1fbpfcp-zoom-1.image) ### 难点与思考： **1. 如何计算需要渲染的数据** - 数据可分为总数据，与需要`渲染的数据`，需要渲染的数据包括了可见区域与缓冲区域的数据 - 通过单条数据占位的高度与可见区域的高度，算出可见区域的列表条数，再往上和往下扩展几条缓冲区域的数据（本次代码是以3倍可见区域的条数作为需要渲染的数据条数） **2. 何时替换数据** - 监听滚动事件，渲染元素的第一条数据滚动出缓冲区域后(也就是可见区域第一个元素的`index`大于缓冲区域的条数时)，就开始替换数据了，每次往上滑动一个元素，就替换一次数据。 **3. 为何需要空白占位，如何计算空白占位的高度** - 由于列表在滚动过程中会替换数据，如果没有空白占位的话，会导致第一个元素消失后，第二个元素立马替换了第一个元素的位置，会导致错位。如下图所示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d653840003149e2add26228173dd40d~tplv-k3u1fbpfcp-zoom-1.image) - 因此滚动时，需要在元素消失后，补一个相同高度的空白占位 - 上方的空白占位 = 消失的元素个数（也就是第一个渲染元素的`index`） * 单个元素的高度 - 下方的空白占位 = 剩下需要渲染的元素个数（也就是最后一个元素的`index`与总数据条数的差值）* 单个元素的高度 ### 其他注意事项： 1. 在使用`v-for`遍历渲染数据时，`key`的值使用`index`，不用`item`的`id`，可以避免该dom元素被重新渲染，只替换数据。 1. 下拉加载更多时，不要将整个数据替换了，而是追加到数据的后面，避免之前展示的数据被替换了。 1. 空白占位可以使用`padding`来占位，也可以使用DOM元素占位，使用DOM元素占位监听滚动事件时，应使用`touchmove`或`mousemove`监听，避免dom元素高度变化后，又触发了`scroll`滚动事件。 1. 监听滚动事件应该采用节流的方式，避免程序频繁执行。 1. 监听滚动时加上`passive`修饰符，可以提前告知浏览器需要执行`preventDefault`，使滚动更流畅，具体功能可以参考vue官网。 1. 外层包裹的元素需要有固定高度，并且`overflow`为`auto`，才能监听`scroll`滚动事件。 ## 三、实现 ### 最终实现效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6163b9a97b1454a93983d81458cd697~tplv-k3u1fbpfcp-zoom-1.image) ### 实现代码 ```html ``` ### 模拟数据的后端代码 - 这是本次用于模拟后端数据的代码，采用`mock`和`express`。 ```js const Mock = require('mockjs') const express = require('express') const app = express() let sum = 1 // mock的ID // 根据入参生成num条模拟数据 function generatorList(num) { return Mock.mock({ [`list|${num}`]: [ { 'id|+1': sum, title: "@ctitle(15,25)", from: "@ctitle(3,10)", } ] }) } // 允许跨域 app.all('*', function (req, res, next) { res.setHeader("Access-Control-Allow-Origin", '*'); res.setHeader("Access-Control-Allow-Headers", '*'); res.setHeader("Access-Control-Allow-Method", '*'); next() }) app.get('/data', function (req, res) { const { num } = req.query const data = generatorList(num) sum += parseInt(num) return res.send(data) }) const server = app.listen(4000, function () { console.log('4000端口正在监听~~') }) ``` ## 四、封装为组件 > 也可以封装为插件，此处为了方便就封装为组件 ### props： 1. allList ：所有数据 1. oneHeight ：单条元素的高度 1. lower ：距离底部多远时触发触底事件，默认50 ### event： - @scrollLower ：触底时触发 ### 虚拟列表组件代码 ```html ``` ### 使用代码 ```html ``` ## 五、在uniapp中封装组件 > 由于最近在开发一个app项目，uniapp的list长列表组件只能支持nvue，且app存在兼容性问题，无法通过event获取滚动高度，所以结合了uniapp内置的scroll-view，与上述功能，完成了一个简单的长列表展示组件 > scroll-view请用法参考uniapp官网，如需要使用scroll-view中的其他功能，可以自行增加，比如下拉刷新，上拉加载更多等 ```html ```

{{ item.title }} - {{ item.id }}

{{ item.from }}

{{ item.title }} - {{ item.id }}

{{ item.from }}