乐趣区

关于javascript:一个支持百万量级的vue3无限滚动组件

jiezi

什么是有限滚动组件

当咱们的列表页有几百万条数据的时候应该怎么办呢？分页兴许不是最好的体验形式，有限滚动就是解决这种场景更好的技术手段。当用户向下滚动内容时，会主动增加下一页的 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>

应用示例

  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>

  1. 设置滚动方向为程度方向 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" 能够设置滚动方向为程度。

  2. 动态控制滚动高度（每一项 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, 通过这个函数能够动静设置元素宽高。

  1. 滚动到指定元素地位 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 来滚动到指定元素。

  2. 滚动到指定元素（更精密的对齐形式）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，别离对应主动对齐、位于容器起始，位于容器两头，位于容器开端。

  3. 滚动到指定地位，单位是像素 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 来滚动到指定地位。

  1. 反对动静变更数据 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.

  2. 设置额定渲染元素的数量 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 提报。

退出移动版