正文
滚动相信大家都做过，但是不 知道 大家当遇到大量数据甚至几百万条数据时该怎么办呢?
或许有小伙伴说：用分页呀，每次只展示有限的数据，需要更多的时候点击下一页呀
分页确实是一种解决 方案 ，但是却不是最好的体验方式。 无限滚动 就是解决这种场景更好的技 术 手段
而今天就是给大家分享一款可以承受百万量级数据的无限滚动组件 vue3 -i nfin IT e-list
vue3-infinite-list
vue3-infinite-list 是一个针对vue3的短小精悍的无限滚动组件，它体积非常小、零依赖gzip只有 3kb。并且使用的是最新的技术栈&nbs p; Vue3 SETUP api + Ty PE Script
特点@H_ 406 _56@ 体积小 & am p; 零依赖 – gzipped 后只有 3kb 百万级列表渲染, 不费吹灰之力 支持滚动到指定条目 或 指定初始滚动偏移量 支持固定 或 可变 宽 /高 垂直 or 水平 列表 使用 简单 可以结合各类UI库使用 丰富的demo演示案例
安装
npm
npm install vue3-infinite-list - -s ave
或者 yarn
yarn add vue3-infinite-list
使用
在应用模块内引入无限滚动组件
import InfiniteList From 'vue3-infinite-list';
用无限滚动组件标签包裹待滚动数据列表
<InfiniteList
:data="data"
:width="'100%'"
:h ei ght="500"
:itemSize="50"
:debug="debug"
v-slot="{ item, index }"
>
<div class="li-con">{{ index + 1 }} : {{ item }}</div>
</InfiniteList>
使用非常简单，内部可以结合element-plus或者antd-vue、tdesign等UI库。
而且还可以动态控制滚动高度（每一项item高度值是变化的）
<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;
}
};
功能
item固定高度类型, 垂直滚动(默认) 设置滚动 方向 为水 平方 向 动态控制滚动高度（每一项item高度值是变化的） 滚动到指定元素位置（可以设置对齐方式） 支持动态变更数据 设置额外渲染元素的数量gith ub : github.com/tnfe/vue3-i…
文档地址： tnfe.github.io/vue3-infini…
以上就是vue 支持百万量级的无限滚动组件详解的详细内容，更多关于vue 百万量级的无限滚动的资料请关注其它相关 文章 ！
您可能感兴趣的文章: vue中使用vue-seamless-scroll插件实现列表无缝滚动效果 Vue 实现一个简单的鼠标拖拽滚动效果插件 vue滚动插件better-scroll使用详解 vue的滚动条插件实现代码 简单方法实现Vue 无限滚动组件示例 Vue transition组件简单实现数字滚动 vue3实现数字滚动特效实例详解
总结
以上是 为你收集整理的 vue 支持百万量级的无限滚动组件详解 全部内容，希望文章能够帮你解决 vue 支持百万量级的无限滚动组件详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue 支持百万量级的无限滚动组件详解的详细内容...