前端优化不可不避的一谈之虚拟滚动:众所周知,滚动是直挺挺的往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>