网站备案要多少天,wordpress如何写个插件,wordpress 去掉发布者,青羊区定制网站建设报价需求分析#xff08;长列表展示#xff09; 页面某处需要渲染 1w 条数据#xff0c;并需要滚动展示#xff0c;这时如果直接把这些数据渲染到页面上#xff0c;会导致系统内存大量被占用#xff0c;导致页面卡顿或崩溃 我们都知道#xff0c;每次 DOM 修改#xff0c;浏…
需求分析长列表展示 页面某处需要渲染 1w 条数据并需要滚动展示这时如果直接把这些数据渲染到页面上会导致系统内存大量被占用导致页面卡顿或崩溃 我们都知道每次 DOM 修改浏览器都会重新计算元素布局再重新渲染回流 / 重绘。如果数据量很大页面计算时间就会加成造成页面卡顿 解决方案 根源DOM 元素太多思路限制元素数量 / 虚拟DOM后台数据格式 [{checked: 0data: xxxlabel: xxx}
]Vue 中就有一个现成的轮子可以解决这个问题vue-virtual-scroller 安装 vue-virtual-scroller 插件npm install --save vue-virtual-scroller在 main.js 引入// 注意别忘了引用这个css
import vue-virtual-scroller/dist/vue-virtual-scroller.css
import Vue from vue;
import { RecycleScroller } from vue-virtual-scrollerVue.component(RecycleScroller, RecycleScroller)在组件里使用 items呈现数据item-size呈现数据的大小 / 高度key-filed如果 items 是对象需要用这个做唯一标识RecycleScrollerstyleheight: 200px; overflow: autoclassscroller:itemslistItem:item-size20key-fielddata
template v-slot{ item }el-checkbox :keyitem.data :labelitem.label //template
/RecycleScrollerscript
export default {data() {return {listItem: []}}
}
/script总结 使用 vue-virtual-scroller 插件展示大量数据是可以比较流畅的渲染 / 滚动的 --------------------- 作者雪急飞绪 来源CSDN 原文https://blog.csdn.net/qq_38689395/article/details/116757771 版权声明本文为作者原创文章转载请附上博文链接 内容解析ByCSDN,CNBLOG博客文章一键转载插件
