项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
data-component:循环的内容,这里由VirtualItem.vue extra-prop:其他要传入循环内容的props --></template>importVirtualListfrom"vue-virtual-scroll-list";importVirtualItemfrom"./VirtualItem";exportdefault{name:"",components: {VirtualList, },data() {return{itemComponent:VirtualItem,//虚拟滚动组件循环对象cu...
简介: Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题 1. 简介 vue-virtual-scroll-list npm 地址 vue-virtual-scroll-list 主页 安装 npm i vue-virtual-scroll-list 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览...
extra-prop:其他要传入循环内容的props --> </template> importVirtualListfrom"vue-virtual-scroll-list"; importVirtualItemfrom"./VirtualItem"; exportdefault{ name:"", components: { VirtualList, }, data() { return{ itemComponent:VirtualItem,//虚拟滚动组件循环对象 current:"", goodsList: [//要...
npmivue-virtual-scroll-list 1. 对比 通过v-for 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际将 10000 条数据全部渲染出来了,这很容易导致页面卡顿。 通过vue-virtual-scroll-list 渲染 10000 个节点,当页面展示94~100区间内的数据时,我们发现浏览器实际只渲染了展示数据前后的91-110...
参数描述 data-sources 数据列表(数组) data-key 列表的key值,用于唯一标识每一项 data-component 列表子组件 keeps 渲染的最大DOM数量 extra-props 额外参数,可传递变量和方法 @scroll 监听滚动事件 五、示例代码 以下是一个完整的示例,展示了如何使用vue-virtual-scroll-list组件:...
Only 3 required props, simple and very easy to use. Big data list with high render performance and efficient. You don't have to care about item size, it will calculate automatic. Live demo https://tangbc.github.io/vue-virtual-scroll-list ...
extra-props 值为对象,可以传入自定义属性进去 高度设置 .virtualselect { // 设置最大高度 &-list { max-height:245px; overflow-y:auto; } .el-scrollbar .el-scrollbar__bar.is-vertical { width: 0; } } 原理 只渲染keeps传入的个数,滚动时通过改变padding的值来模拟滚动,里面的每一个item在滚动时...
npm install vue-virtual-scroll-list --save Root component: <template> <virtual-list style="height: 360px; overflow-y: auto;" // make list scrollable :data-key="'uid'" :data-sources="items" :data-component="itemComponent" /> </template> import Item from './Item' import Virtual...
free pan/vue-virtual-scroll-list 代码Issues0Pull Requests0Wiki统计流水线 服务 我知道了,不再自动展开 加入Gitee 与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :) 免费加入 已有帐号?立即登录 分支(2) 标签(79) 管理 管理 ...