项目中数据量有时候过于庞大,使用elementui的Select组件时,会导致下拉框加载速度慢卡顿甚至于卡死,为解决这个问题,使用vue-virtual-scroll-list插件 ,模拟虚拟滚动。 vue-virtual-scroll-list是vue的一个虚拟滚动组件,通过不渲染可视区域以外的内容,显示虚拟的滚动条来提升页面性能 首先看 安装 npm install vue-virtual...
vue-virtual-scroller 提供了 scrollToItem 方法用于滚动到特定项。 vue-virtual-scroller 是一个用于处理大量数据的虚拟滚动列表插件,它提供了多种方法和属性来优化滚动体验。其中,scrollToItem 方法允许你滚动到列表中的特定项。 使用scrollToItem 方法 要使用 scrollToItem 方法,你首先需要确保你的虚拟滚动组件已经...
在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 安装虚拟滚动插件...
Smooth scrolling for any amount of data. Latest version: 1.1.2, last published: a year ago. Start using vue-virtual-scroll-plugin in your project by running `npm i vue-virtual-scroll-plugin`. There are no other projects in the npm registry using vue-virt
Smooth scroll with any amount of data. Contribute to simplesmiler/vue-virtual-scroller development by creating an account on GitHub.
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:...
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” 渲...
简介: 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区间内的数据时,我们发现浏览...
Vue-virtual-scroll-list首先需要将所有需要展示的数据加载到组件中,这些数据可以通过Ajax请求从后端获取,也可以在组件初始化时直接传入。通常情况下,这些数据会按照一定的顺序排列成一个数组。 2. 滚动事件监听 Vue-virtual-scroll-list组件会监听滚动事件,当用户滚动到列表底部时,触发滚动到达底部的事件。此时,组件会...
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...