vue虚拟化列表封装的实现

目录

• vue虚拟化列表封装
• 将下面代码复制一份到自己的项目中 
• vue虚拟列表-vue-virtual-scroll-list
• 使用场景
• 安装
• 使用

vue虚拟化列表封装

将下面代码复制一份到自己的项目中 

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，具备自己写轮子的能力才行。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。