阳春三月有白雪，封面图记录2022.3.18在北京拍下的一张雪景 ❄️❄️❄️

作者：adajuly

引言

如今web开发中，无限加载是必需的一项功能，一个列表往往默认只加载10条，想看更多只能逐渐点击往下翻页。上网搜索发现目前使用较广泛的是 vue-infinite-scroll，但是这个包目前处于无人维护状态，且不支持vue3 , 那么只能自己造轮子，开发一款短小精悍、支持vue3的无限滚动加载库vue3-infinite-list。接下来详细介绍下vue-infinite-list的配置及使用详解。更多使用示例请参考demo。

推荐原因

• 体积小 & 零依赖 – gzipped 后只有 3kb
• 百万级列表渲染, 不费吹灰之力
• 支持滚动到指定条目 或 指定初始滚动偏移量
• 支持固定 或 可变 宽/高
• 垂直 or 水平 列表
• 中英文文档
• 支持VUE3

正文

安装

官网： github.com/tnfe/vue3-i…

使用 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. 基本用法: 固定每一项高度, 垂直滚动(默认) demo

<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. 动态控制滚动高度（每一项高度值是变化的） 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类型*

结尾

一款零依赖，适用于vue的短小精悍的无限滚动加载库的使用方法就介绍完了，是不超级容易上手，赶紧使用起来吧，使用过程中有任何问题，请在此 report it 提报。