虚拟列表

2022-05-12 15:00:49 阅读：238 来源： 互联网

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

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

这是文档：https://gitee.com/MITVIP/vue-virtual-scroller#dynamicscroller

使用

main.js 引入

  import VueVirtualScroller from 'vue-virtual-scroller';
  import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
  Vue.use(VueVirtualScroller);

在页面中使用

  <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>

属性介绍：
- items：整个聊天室的数据(要滚动的所有数据)
- min-item-size：每条数据最小的大小(高度)
- key-field：id(相当于 v-for 中的 key)
- emitUpdate：渲染新数据时是否触发 update 事件（默认是 false）
- @update：渲染新数据时的更新的事件
  1. start：页面渲染开始的数据 index
  2. end：页面渲染结束的数据 index
```
dynaScroll(start, end) {
  .....
  .....
}
```
注意事项(踩的坑)
- 上面的代码中 dynam_scroll 类名的高度要 100%，其次，其父元素也要 100%，或者两者都要有具体的高度也可以。要不然滚动不能触发 update 事件
  如果不能触发：1. emitUpdate 属性值为 false 2. 元素高度的问题(可能是无法继承父级以上的高度造成)

标签：vue,scroller,....,virtual,列表,虚拟,数据
来源： https://www.cnblogs.com/aloneer/p/16262467.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

虚拟列表