资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

vue3无限滚动组件怎么用

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

项城网站建设公司创新互联公司,项城网站设计制作，有大型网站制作公司丰富经验。已为项城上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的项城做网站的公司定做！

什么是无限滚动组件

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

vue3无限滚动组件怎么用

无限滚动是电商网站、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是一只千足毛毛虫? 。

vue3无限滚动组件怎么用

特性

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

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

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

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

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

  • For Vue3typescript编写

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

vue3无限滚动组件怎么用

如何使用

vue3无限滚动组件怎么用

使用 npm:
npm install vue3-infinite-list --save
使用 yarn:
yarn add vue3-infinite-list

引用

import InfiniteList from 'vue3-infinite-list';
  
    {{ index + 1 }} : {{ item }}
  

使用示例

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

vue3无限滚动组件怎么用

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


  {{ index + 1 }} : {{ item }}

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

  
 
   item{{ index }} 
   xxxxxxx 
   xxxxxxx 
   Primary
 
  

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

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

vue3无限滚动组件怎么用

  
    item {{ index }} : {{ item }}
  
// 通过这个函数可以动态设置元素宽高.
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

  
 item{{ index + 1 }} : {{ item }}
  

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

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

 
   
      item{{ index + 1 }} : {{ item }}
   
 

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

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

  
    
      index: {{ index + 1 }} 
      xxxxxxxxxx
      
        Primary 
        Success
    
  

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

7.支持动态变更数据 demo

  
 
   item{{ index + 1 }}
   2022-05-01
   Name: Tom
   
     Button
     Button
   
 
  

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

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


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

vue3无限滚动组件怎么用

组件的属性和配置

属性类型是否必须?描述
widthNumber or String*✓列表宽度. 在滚动方向是 'horizontal'是用于确定滚动元素个数.
heightNumber or String*✓列表宽度. 在滚动方向是 'vertical'是用于确定滚动元素个数.
dataany[]✓构建滚动元素的数据
itemSize(index: number): number
可以是一个固定的宽/高（取决于滚动方向）, 一个包含列表所有元素的数组, 或者是返回指定位置元素高度的函数: (index: number): number
scrollDirectionString
指定滚动方向 'vertical' (默认) 或 'horizontal'.
scrollOffsetNumber
可以指定滚动位置
scrollToIndexNumber
可以指定到滚动到哪个元素
scrollToAlignmentString
结合 scrollToIndex一起用, 用于控制滚动到的元素的对齐方式. 可选: 'start', 'center', 'end' or 'auto'. 使用 'start' 将对齐到容器的起始位置， 'end' 则对齐到元素的结尾. 使用 'center可以对齐到容器正中间. 'auto' 则是滚动到scrollToIndex指定元素恰好完全可见的位置
overscanCountNumber
在可见元素上/下额外渲染的元素数量. 这可以减少在特定浏览器/设备上的闪烁
width 在 scrollDirection 是 'vertical'时只能是string类型。类似的, Height 在 scrollDirection 是 'horizontal'时也只能是string类型*

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


分享标题：vue3无限滚动组件怎么用
分享地址：http://cdkjz.cn/article/gcsgdi.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都网站制作网页设计网站优化排名广安网站建设成都网站推广公司成都免费做网站攀枝花网站建设成都棕树机房友益建筑机械凿成都二枢机房

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图