vuescroll插件文档 先说原因:大概率是因为滚动事件并不是在你@scroll的div上发生的,而是发生在document上在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){})我是在做滚动条滑到底部时,自动加载更多的时候有这个需求。我认为使用document.addEventListener会破坏vue的统...
--></template>importVirtualListfrom"vue-virtual-scroll-list";importVirtualItemfrom"./VirtualItem";exportdefault{name:"",components: {VirtualList, },data() {return{itemComponent:VirtualItem,//虚拟滚动组件循环对象current:"",goodsList: [//要循环的数据{id:"1",value:"商品1"}, {id:"2",value...
data-sources:循环的数据 data-component:循环的内容,这里由VirtualItem.vue extra-prop:其他要传入循环内容的props --> </template> importVirtualListfrom"vue-virtual-scroll-list"; importVirtualItemfrom"./VirtualItem"; exportdefault{ name:"", components: { VirtualList, }, data() { return{ itemComp...
以下是实现Vue虚拟滚动的主要步骤:1、使用Vue库或插件,如vue-virtual-scroller;2、设置数据源和基本配置;3、实现滚动事件和渲染逻辑。 一、使用Vue库或插件 为了实现虚拟滚动,首先需要选择一个合适的Vue库或插件。vue-virtual-scroller是一个流行的选择,它提供了简单易用的API和良好的性能。 安装插件: npm install ...
}elseif(item.offset > scrollTop) { high = mid -1; }else{returnmid; } }returnlow >0? low -1:0; } } AI代码助手复制代码 三、使用第三方库实现 3.1 vue-virtual-scroller vue-virtual-scroller是一个流行的Vue虚拟滚动库,提供多种滚动模式: ...
项目vue2用到了虚拟滚动列表vue-virtual-scroller,需要用到动态高度组件,DynamicScroller,写完后,发现页面加载不卡顿了,但是这个滚动又很卡顿。不管时拖动滚动条,还是通过滑轮滚动,都有非常明显的卡顿,请问怎么处理? vue2 有用关注2收藏 回复 阅读1.8k AI BotBETA ### 回答 针对 `vue-virtual-scroller` 在使用 `...
总结 在Vue 2中实现长列表虚拟滚动,可以选择使用 vue-virtual-scroller 或vue-virtual-scroll-list 这样的第三方库,也可以手动实现。使用第三方库可以简化开发过程,而手动实现则提供了更高的灵活性。根据你的具体需求选择合适的方法。
优化背景:如果你的应用存在非常长的或者无限滚动的列表,那么需要采用窗口化的技术来优化性能,只需要渲染少部分的内容(可视区域),减少重新渲染组件和创建dom节点的时间,可以参考以下的开源项目vue-vitual-scoll -list 和vue-virtual-scroller ,来优化这种无限列表的
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; Vue.component('virtual-scroller', VirtualScroller); 实现组件: 创建一个虚拟列表组件: <template> <virtual-scroller :items="items" :item-height="50"> <template #default="{ item ...
https://github.com/Akryum/vue-virtual-scroller 下载后 运行 里面的docs-src文件就可以。 然后我用的是。 <recycle-list ref="scroller" class="scroller" :