虚拟列表

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

• 安装
  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. 在页面中使用

       <DynamicScroller
         ref="qingchat"
         :items="chatmesgarr"
         :min-item-size="54"
         key-field="message_id"
         class="dynam_scroll"
         :emitUpdate="true"
         @update="dynaScroll"
       >
         <template #before>
           ....
           ....
           具体的业务代码
         </template>
         <template v-slot="{ item, index, active }">
           <DynamicScrollerItem
             :item="item"
             :active="active"
             :data-index="index"
           >
             ....
             ...
             具体的业务代码
           </DynamicScrollerItem>
         </template>
       </<DynamicScroller>
     

  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,scroller,....,virtual,列表,虚拟,数据
来源： https://www.cnblogs.com/aloneer/p/16262467.html