vue3无限滚动组件怎么用

这篇“vue3无限滚动组件怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3无限滚动组件怎么用”文章吧。

什么是无限滚动组件

当我们的列表页有几百万条数据的时候应该怎么办呢？分页也许不是最好的体验方式，无限滚动就是解决这种场景更好的技术手段。当用户向下滚动内容时，会自动添加下一页的list组件，加载更多内容。用户无需等待页面预加载，而且对于前端渲染来说不会反复渲染大量组件提高了页面渲染性能。所以无限滚动可以为用户提供更好的体验。

无限滚动是电商网站、CMS后台等应用程序中非常常见的一种模式。在线零售商喜欢这种加载产品的模式，因为它允许用户无缝浏览一个类别中可用的每个产品，而不必经常暂停并等待下一页加载。【推荐：vue视频教程】

关于vue3-infinite-list

官网： https://GitHub.com/tnfe/vue3-infinite-list

vue3-infinite-list是一个针对vue3的短小精悍的无限滚动组件，它体积非常小、零依赖gzip只有 3kb。虽然vue相关的无限滚动开源组件也有很多，但是对比同类产品vue3-infinite-list依然有不少自己的特点，并且它完全使用vue3 setup api + typescript编写，项目LOGo是一只千足毛毛虫? 。

特性

• 体积小 & 零依赖 – gzipped 后只有 3kb

• 支持百万级列表渲染, 不费吹灰之力

• 支持滚动到指定条目 和 指定初始滚动偏移量

• 支持固定 和 可变 宽/高的各类列表

• 支持垂直 or 水平 不同布局的列表

• For Vue3 typescript编写

• 使用简单可以结合各类UI库使用

如何使用

使用 npm:

npm install vue3-infinite-list --save

使用 yarn:

yarn add vue3-infinite-list

引用

import InfiniteList from 'vue3-infinite-list';

  <InfiniteList    :data="data"    :width="'100%'"    :height="500"    :itemSize="50"    :debug="debug"    v-slot="{ item, index }"   >    <div class="li-con">{{ index + 1 }} : {{ item }}</div>  </InfiniteList>

使用示例

1.基本用法: item固定高度类型, 垂直滚动(默认) demo

使用非常简单，内部可以结合element-plus或者antd-vue、tdesign等UI库。

<InfiniteList   :data="data"   :width="'100%'"   :height="500"   :itemSize="50"   :debug="debug"   v-slot="{ item, index }">  <div class="li-con">{{ index + 1 }} : {{ item }}</div></InfiniteList>

2.设置滚动方向为水平方向 demo

  <InfiniteList :data="data" :width="900" :height="220" :itemSize="115" scrollDirection="horizontal" :debug="debug" v-slot="{ item, index }"  > <div class="li-con li-con-r">   item{{ index }} <br />   xxxxxxx <br />   xxxxxxx <br />   <el-button type="primary" round>Primary</el-button> </div>  </InfiniteList>

这里scrollDirection="horizontal"可以设置滚动方向为水平。

3.动态控制滚动高度（每一项item高度值是变化的） demo

  <InfiniteList    :data="data"    :width="'100%'"    :height="520"    :itemSize="getItemSize"    :debug="debug"    v-slot="{ item, index }"  >    <div class="li-con">item {{ index }} : {{ item }}</div>  </InfiniteList>

// 通过这个函数可以动态设置元素宽高.const getItemSize = (i: number): number => {      switch (i % 4) {        case 1:          return 80;        case 2:          return 50;        case 3:          return 100;        default:          return 200;      }  };

这里 getItemSize 是一个有如下语法的函数 : (i: number): number, 通过这个函数可以动态设置元素宽高。

4.滚动到指定元素位置 demo

  <InfiniteList :data="data" :width="'100%'" :height="500" :itemSize="getItemSize" :scrollToIndex="scrollToIndex" :debug="debug" v-slot="{ item, index }"  > <div class="li-con" :class="getClass(index)">item{{ index + 1 }} : {{ item }}</div>  </InfiniteList>

你也可以使用 scrollToIndex 来滚动到指定元素。

5.滚动到指定元素 （更精细的对齐方式） demo

 <InfiniteList   :data="data"   :width="'100%'"   :height="500"   :itemSize="getItemSize"   :scrollToIndex="scrollToIndex"   :scrollToAlignment="scrollToAlignment"   :debug="debug"   v-slot="{ item, index }" >   <div      class="li-con"      :class="getClass(index)"    >      item{{ index + 1 }} : {{ item }}   </div> </InfiniteList>

你可以使用 scrollToIndex 和 scrollToAlignment 属性来指定滚动元素如何与滚动区域对齐, 由四个选项: auto, start, center, end，分别对应自动对齐、位于容器起始，位于容器中间，位于容器末尾。

6.滚动到指定位置，单位是像素 demo

  <InfiniteList    :data="data"    :width="'100%'"    :height="500"    :itemSize="90"    :scrollOffset="scrollOffset"    :debug="debug"    v-slot="{ item, index }"  >    <el-row class="mb-4 li-con">      <el-col :span="8">index: {{ index + 1 }} </el-col>      <el-col :span="8">xxxxxxxxxx</el-col>      <el-col :span="8">        <el-button type="primary">Primary</el-button>         <el-button type="success">Success</el-button></el-col      >    </el-row>  </InfiniteList>

你也可以使用 scrollOffset 来滚动到指定位置。

7.支持动态变更数据 demo

  <InfiniteList  :data="data"  :width="'100%'"  :height="500"  :itemSize="60"  :debug="debug"  v-slot="{ item, index }"  > <el-row class="li-con">   <el-col :span="6">item{{ index + 1 }}</el-col>   <el-col :span="6">2022-05-01</el-col>   <el-col :span="6">Name: Tom</el-col>   <el-col :span="6">     <el-button type="primary">Button</el-button>     <el-button type="success">Button</el-button>   </el-col> </el-row>  </InfiniteList>

只需要动态的改变绑定的 data.

8.设置额外渲染元素的数量 demo

<InfiniteList   :overscanCount="2"   :data="data"   :width="'100%'"   :height="500"   :itemSize="50"   :debug="debug"   v-slot="{ item, index }">  <div class="li-con">{{ index + 1 }} : {{ item }}</div></InfiniteList>

在可见的item上/下再各多渲染额外的overscanCount个item。调整它可以帮助减少某些浏览器/设备上的滚动闪烁。

组件的属性和配置

width 在 scrollDirection 是 'vertical'时只能是string类型。类似的, Height 在 scrollDirection 是 'horizontal'时也只能是string类型*

以上就是关于“vue3无限滚动组件怎么用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。