建设摩托车官网报价_有什么可以下载软件的网站_网络媒体有哪些_网站怎么做的

前端优化不可不避的一谈之虚拟滚动：众所周知，滚动是直挺挺的往dom树加东西，如果滚太多滚到万级，渲染过多就会卡顿，而vue-virtual-scroll的灵活懒渲染就能解决这个问题

1，下载与配置

npm install --save vue-virtual-scroller@next

  2，main.ts中配置导入

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

3，使用如下：

Arr是自定义的比如一个对象数组，至少含有id，min-item-size是最小的高度默认px单位，key-field会读取posts中的id，列表的长度由posts长度决定，行内style的两个样式是必须有的，高度代表视窗高度，然后设置overscroll-scroll才能滚动，其他属性就没必要管了，不用去看官方又臭又长的文档

<template><DynamicScroller:style="'overflow':'scroll', 'height':'400px'":items="Arr":min-item-size="100"key-field="id"><template #default="{ item, index, active }"><DynamicScrollerItem:item="item":active="active":data-index="index">// 这里放置需要循环的代码</DynamicScrollerItem></template></DynamicScroller>
</template>