什么是有限滚动组件
当咱们的列表页有几百万条数据的时候应该怎么办呢？分页兴许不是最好的体验形式，有限滚动就是解决这种场景更好的技术手段。当用户向下滚动内容时，会主动增加下一页的list组件，加载更多内容。用户无需期待页面预加载，而且对于前端渲染来说不会重复渲染大量组件进步了页面渲染性能。所以有限滚动能够为用户提供更好的体验。
有限滚动是电商网站、CMS后盾等应用程序中十分常见的一种模式。在线零售商喜爱这种加载产品的模式，因为它容许用户无缝浏览一个类别中可用的每个产品，而不用常常暂停并期待下一页加载。
对于vue3-infinite-list
官网： https://github.com/tnfe/vue3-...
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>应用示例
根本用法: 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>设置滚动方向为程度方向 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"能够设置滚动方向为程度。动态控制滚动高度（每一项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, 通过这个函数能够动静设置元素宽高。
滚动到指定元素地位 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来滚动到指定元素。滚动到指定元素 （更精密的对齐形式） 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，别离对应主动对齐、位于容器起始，位于容器两头，位于容器开端。滚动到指定地位，单位是像素 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 来滚动到指定地位。
反对动静变更数据 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.设置额定渲染元素的数量 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 | Number or String* | ✓ | 列表宽度. 在滚动方向是 'horizontal'是用于确定滚动元素个数. |
| height | Number or String* | ✓ | 列表宽度. 在滚动方向是 'vertical'是用于确定滚动元素个数. |
| data | any[] | ✓ | 构建滚动元素的数据 |
| itemSize | (index: number): number | 能够是一个固定的宽/高（取决于滚动方向）, 一个蕴含列表所有元素的数组, 或者是返回指定地位元素高度的函数: (index: number): number | |
| scrollDirection | String | 指定滚动方向 'vertical' (默认) 或 'horizontal'. | |
| scrollOffset | Number | 能够指定滚动地位 | |
| scrollToIndex | Number | 能够指定到滚动到哪个元素 | |
| scrollToAlignment | String | 联合 scrollToIndex一起用, 用于管制滚动到的元素的对齐形式. 可选: 'start', 'center', 'end' or 'auto'. 应用 'start' 将对齐到容器的起始地位， 'end' 则对齐到元素的结尾. 应用 'center能够对齐到容器正中间. 'auto' 则是滚动到scrollToIndex指定元素恰好齐全可见的地位 | |
| overscanCount | Number | 在可见元素上/下额定渲染的元素数量. 这能够缩小在特定浏览器/设施上的闪动 |
width 在scrollDirection是'vertical'时只能是string类型。相似的, Height 在scrollDirection是'horizontal'时也只能是string类型*
结尾
一款零依赖，实用于vue的短小精悍的有限滚动加载库的应用办法就介绍完了，是不超级容易上手，连忙应用起来吧，应用过程中有任何问题，请在此 report it 提报。