vue之虚拟滚动

一、解决的问题

对于大量数据的懒加载,我们可以使用虚拟滚动的技术。虚拟滚动的原理是只渲染可视区域内的数据,当用户滚动时,动态计算并渲染新的可视数据,从而实现大数据量的流畅滚动。

在Vue中,我们可以使用第三方库如vue-virtual-scroller来实现虚拟滚动。

二、实现方式

首先,安装vue-virtual-scroller库:

复制代码
npm install vue-virtual-scroller

html

复制代码
<template>
  <div>
    <RecycleScroller
      class="scroller"
      :items="dataList"
      :item-size="30"
      key-field="id"
    >
      <template #default="{ item }">
        <div class="item">
          {{ item.content }}
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      dataList: []
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 调用API接口,获取数据
      axios.get('/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

<style>
.scroller {
  height: 100%;
  overflow-y: auto;
}

.item {
  height: 30px;
  line-height: 30px;
}
</style>

三、属性api

RecycleScroller组件的主要属性如下:

  • items:数组,需要渲染的数据列表。

  • item-size:数字,每个列表项的大小(高度或宽度)。

  • key-field:字符串,每个列表项的唯一标识字段。

  • page-mode:布尔值,是否使用页面模式。在页面模式下,滚动容器是document.documentElement,否则是RecycleScroller自身。

  • direction:字符串,滚动方向,可以是vertical(垂直)或horizontal(水平)。

  • buffer:数字,渲染缓冲区大小。增大这个值可以减少滚动时的列表项闪烁,但会增加内存占用。

  • prerender:数字,预渲染的列表项数量。

  • emitUpdate:布尔值,是否在列表项更新时触发update事件。

以下是一个RecycleScroller的示例:

复制代码
<RecycleScroller
  class="scroller"
  :items="dataList"
  :item-size="50"
  key-field="id"
  page-mode
  direction="vertical"
  :buffer="200"
  :prerender="10"
  emitUpdate
>
  <template #default="{ item }">
    <div class="item">
      {{ item.content }}
    </div>
  </template>
</RecycleScroller>

以上代码中,RecycleScroller会渲染dataList中的数据,每个列表项的高度是50px,使用页面模式和垂直滚动,渲染缓冲区大小是200px,预渲染10个列表项,并在列表项更新时触发update事件。

相关推荐
小旋风01234几秒前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
旧味清欢|5 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾22 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin34 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式