vue虚拟列表 |
您所在的位置:网站首页 › js虚拟列表怎么使用 › vue虚拟列表 |
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个,所以得计算好一次渲染的个数,需要动态的绑定。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |