虚拟列表

??列表加载数据，对于短列表还好，长列表就不太好了，比如：聊天很频繁的聊天室，需要进行列表优化。使用虚拟列表进行优化。这里介绍一个插件的使用（以聊天室为列）

安装
npm install vue-virtual-scroller --save

这是文档：https://gitee.com/MITVIP/vue-virtual-scroller#dynamicscroller
使用
1. main.js 引入
```
  import VueVirtualScroller from 'vue-virtual-scroller';
  import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
  Vue.use(VueVirtualScroller);
```
2. 在页面中使用
```
  
    
    
  
```
3. 属性介绍：
  - items：整个聊天室的数据(要滚动的所有数据)
  - min-item-size：每条数据最小的大小(高度)
  - key-field：id(相当于 v-for 中的 key)
  - emitUpdate：渲染新数据时是否触发 update 事件（默认是 false）
  - @update：渲染新数据时的更新的事件
    1. start：页面渲染开始的数据 index
    2. end：页面渲染结束的数据 index
```
dynaScroll(start, end) {
  .....
  .....
}
```
4. 注意事项(踩的坑)
  - 上面的代码中 dynam_scroll 类名的高度要 100%，其次，其父元素也要 100%，或者两者都要有具体的高度也可以。要不然滚动不能触发 update 事件
    如果不能触发：1. emitUpdate 属性值为 false 2. 元素高度的问题(可能是无法继承父级以上的高度造成)

vue

相关