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事件。

相关推荐
翻滚吧键盘28 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架