备案控制台
开发者社区 开发与运维 文章 正文

vue element plus Infinite Scroll 无限滚动

2024-04-07 103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue element plus Infinite Scroll 无限滚动

滚动至底部时，加载更多数据。

基础用法#

在要实现滚动加载的列表上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

禁用加载#

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

指令#

属性 说明 类型 默认
v-infinite-scroll 滚动到底部时，加载更多数据 Function —
infinite-scroll-disabled 是否禁用 boolean false
infinite-scroll-delay 节流时延，单位为ms number 200
infinite-scroll-distance 触发加载的距离阈值，单位为px number 0
infinite-scroll-immediate 是否立即执行加载方法，以防初始状态下内容无法撑满容器。 boolean true

源代码#

组件 • 文档

文章标签：
JavaScript
容器
关键词：
vue element VUE.js
element VUE.js
plus VUE.js
element plus VUE.js
vue element plus VUE.js
破浪前进
目录
相关文章
Star时光
|
2天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架：组件化开发利于重用与扩展，响应式数据绑定简化状态管理；学习曲线平缓，生态系统丰富，集成便捷，且具性能优化手段。缺点包括社区规模相对小，类型支持不足（Vue 3.x改善），路由和状态管理需额外配置，SEO支持有限。随着发展，部分缺点正被克服。
Star时光
8 1
爱你三千遍斯塔克
|
3天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
爱你三千遍斯塔克
10 1
爱你三千遍斯塔克
|
3天前
|
JavaScript
青戈大佬安装Vue，无Eslint安装版，vue2安装，vue2无eslint，最简单配置Vue安装资料
青戈大佬安装Vue，无Eslint安装版，vue2安装，vue2无eslint，最简单配置Vue安装资料
爱你三千遍斯塔克
9 1
小周sir
|
2天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具（npm, webpack, Git）。 - 从Vue官方文档学习基础，包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex，掌握路由管理和状态管理。 - 学习自定义指令和Mixins，优化性能技巧。 - 实战项目练习，加入Vue社区，阅读相关资源，提升技能。 - 关注Vue生态，持续实践和创新，以适应不断发展的框架。
小周sir
6 0
凌浩雨
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
凌浩雨
1009 0
谢妹纸
|
3天前
|
JavaScript
vue知识点
vue知识点
谢妹纸
7 1
朝阳39
|
3天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
朝阳39
10 1
爱你三千遍斯塔克
|
3天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
爱你三千遍斯塔克
14 0
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
朝阳39
|
4天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景，记住账号--支持多账号，显隐密码切换，登录状态保持）
vue实战——登录【详解】(含自适配全屏背景，记住账号--支持多账号，显隐密码切换，登录状态保持）
朝阳39
14 1
朝阳39
|
4天前
|
JavaScript
vue实战——404页面模板001——男女手电筒动画
vue实战——404页面模板001——男女手电筒动画
朝阳39
12 1