start.value = startIndex; end.value = startIndex + visibleCount.value; // 为了缓冲,可以稍微渲染更多的项 // 比如增加前后各10项,避免快速滚动时的白屏现象 }; const onScroll = (event) => { calculateRange(event.target.scrollTop); }; .virtual-scroller { overflow-y: auto; position: relati...
vue <template> <div ref="scroller" class="virtual-scroller" @scroll="onScroll"> <div class="spacer" :style="{ height: `${totalHeight}px` }"></div> <div v-for="(item, index) in visibleItems" :key="index" class="list-item"> {{ item }} ...
Smooth scrolling for any amount of data. Latest version: 0.2.3, last published: 4 years ago. Start using vue3-virtual-scroller in your project by running `npm i vue3-virtual-scroller`. There are 5 other projects in the npm registry using vue3-virtual-scr
用vue-virtual-scroller或者或者自定义: <template> {{ item.name }} </template> import { ref, onMounted, onUnmounted, computed, watch } from 'vue'; const scrollContainer = ref(null); const items = ref([]); const pageSize = 10; const currentPage = ref(1); const isLoading =...
import{VirtualScroller,VirtualScrollerRow}from'sigma-scrollkit'importtype{VirtualEntry}from'sigma-scrollkit/types/shared';// ...<template><VirtualScrollerref="virtualGridRef"layout-type="grid":scroller-id="0":virtual-entries="formattedDirEntries":min-column-width="minColumnWidth"@viewport-mounted="...
vue-virtual-scroller-classic This is a vue 3 implementation of the original VirtualScroller from version v0.12.2 of vue-virtual-scroller. This removes the RecycleScroller and uses the original approach, which means you're safe to use local component instance data inside the scroller. The end re...
vue-video-player：VueJS视频及直播播放器 vue-fullcalendar：基于vue.js的全日历组件 rubik：基于Vuejs2的开源 UI 组件库 VueStar：带星星动画的vue点赞按钮 vue-mugen-scroll：无限滚动组件 mint-loadmore：VueJS的双向下拉刷新组件 vue-tables-2：显示数据的bootstrap样式网格 vue-virtual-scroller：带...
default: '.virtual-dnd-list-item' }, sortable: { type: Boolean, default: true }, handle: { type: [Function, String], }, group: { type: [Object, String], }, scroller: { type: [Document, HTMLElement], }, lockAxis: { type: String as PropType<LockAxis>, ...
列表渲染优化 :为 v-for 设置唯一 key,大数据量场景使用虚拟滚动(如 vue-virtual-scroller)。 条件渲染策略 :优先用 v-if 替代 v-show 减少常驻 DOM 节点,结合 v-memo 缓存静态组件片段(Vue 3.2+)。 Tree Shaking 配置 :通过 Vite/Rollup 剔除未使用代码,标记 sideEffects: false 优化第...
vue-infinite-loading - An infinite scroll plugin for Vue.js 1.0 & Vue.js 2.0. vue-mugen-scroll - Infinite scroll component for Vue.js 2. vue-infinite-scroll - An infinite scroll directive for vue.js. vue-loop - An infinite content loop component for Vue.js 2. vue-scroller - An ...