vue虚拟列表

您所在的位置:网站首页 js虚拟列表怎么使用 vue虚拟列表

vue虚拟列表

2023-11-24 21:38| 来源: 网络整理| 查看: 265

vue虚拟列表-vue-virtual-scroll-list

vue虚拟列表-vue-virtual-scroll-list vue虚拟列表-vue-virtual-scroll-list使用场景安装使用

使用场景

因为公司做了类似于百度网盘的竞品,所以用户如果上传了很多的文件,就会造成页面DOM元素的过多,然后因为需要操作DOM元素,所以页面会变得很卡。所以用虚拟列表来解决。 在这里插入图片描述

安装

安装的话这个插件有2个版本的,一个是1版本,目前更新到2版本了,二版本功能更加的强大。这里使用了1版本,通俗易懂一点。

npm install --save [email protected] 使用

在单页面中导入

import VirtualList from "vue-virtual-scroll-list"; components: { VirtualList,//注册组件 },

toBottom的方法,这个地方就很坑,因为我只能在1.1.3版本中触发这个方法,1版本的其他版本号我没有触发成功,应该还是高度的问题。 toBottom:滚动到底部时触发,请求下一组数据

//滚到底部时触发 //注:此方法在1.0高版本不兼容,只能在官方文档1.1.3版本中使用 //@1.1.3 toBottom() { this.infiniteHandler(); },

:wclass=“vuesrollboxviewClass” wclass是自定义的class,我这里的业务场景不是每行只有1个数据,从上而下排列下来,而是每行根据分辨率不同,展示5个或6个,所以得计算好一次渲染的个数,需要动态的绑定。 在这里插入图片描述 在这里插入图片描述 总结:还是需要更熟练的掌握原生JS,虽然有各种各样的框架插件来解决问题,但是碰到业务场景更复杂的时候呢?所以还是要掌握原生JS,具备自己写轮子的能力才行。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3