项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
Smooth scrolling for any amount of data. Latest version: 1.1.2, last published: 9 months ago. Start using vue-virtual-scroll-patch in your project by running `npm i vue-virtual-scroll-patch`. There are no other projects in the npm registry using vue-virt
在vue项目的plugins插件目录下创建virtual-scroll目录,并将VirtualScroll.vue文件放入该目录下,然后创建index.js文件。 index.js文件 importVirtualScrollfrom'./VirtualScroll.vue'functioninstall(Vue){ Vue.component('VirtualScroll', VirtualScroll); }exportdefault{ install } 4在vue项目中使用 4.1 安装虚拟滚动插件...
import Vue from "vue"; import { VirtualScroll } from "virtual-scroll-vue-slot"; Vue.use(VirtualScroll);local component <template> <virtual-scroll-vue style="height: 200px" :parent="{ tag: 'ItemsWrapper', props: { class: 'test-class', props: { value: vmTest }, on: { input:...
所以大大节省了系统资源,提升了用户体验。 我在GitHub上找了几个基于Vue.js 的虚拟列表实现,最终找到了一个最合适的vue-virtual-scroll-list,并在项目中进行了使用。 我在闲暇之余研读了一下此项目的代码,发现实现方式比想象中还要简单。 核心实现 this.$slots.default类型为数组,存储的是此组件两标签中的内容,...
import VirtualScroll from "@pixiedev/vue-virtual-scroll" /* * data: Array/list of the objects (must have any key field) * page-mode: boolean * blockHeight: fixed item height (height + margin + padding) else item have height property */ const dataList = ref([]) <template> <Virtu...
vue-virtual-scroll-list 是一个用于处理大数据量列表渲染的 Vue 组件,它通过虚拟滚动技术,只渲染当前可视区域内的数据项,从而显著提高页面性能。以下是关于 vue-virtual-scroll-list 使用方法的详细解答: 1. 安装 vue-virtual-scroll-list 库 首先,你需要在你的 Vue 项目中安装 vue-virtual-scroll-list。可以通过...
⚡️ Smooth scroll with any amount of data. Contribute to bouldu/vue-virtual-scroller development by creating an account on GitHub.
Vue-virtual-scroll-list首先需要将所有需要展示的数据加载到组件中,这些数据可以通过Ajax请求从后端获取,也可以在组件初始化时直接传入。通常情况下,这些数据会按照一定的顺序排列成一个数组。 2. 滚动事件监听 Vue-virtual-scroll-list组件会监听滚动事件,当用户滚动到列表底部时,触发滚动到达底部的事件。此时,组件会...
import virtualList from 'vue-virtual-scroll-list' components:{ 'virtual-list': virtualList }, 基础用法 属性说明 data-key=“selectData.value” 就是绑定的唯一key值,可传入动态的 data-sources=“selectArr” 下拉框的数组 data-component=“itemComponent” 就是抽离中的el-option组件 keeps=“20” 渲...