Element｜InfiniteScroll 无限滚动组件的具体使用方法

VIP文章 已于 2024-02-01 17:17:57 修改
阅读量2.4k 收藏 25
点赞数 19
分类专栏： 前端 ElementUI Vue 文章标签： 前端 Element Vue
于 2023-12-30 13:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58099903/article/details/135261605
版权

目录

PC 端 ： 

InfiniteScroll 无限滚动

详细说明

v-infinite-scroll 指令

infinite-scroll-disabled 属性

infinite-scroll-distance 属性

总结

使用弊端 ：

尝试解决 ：

代码实现 ：

移动端 ：

List 列表

需求背景 ：

        列表页面，由于数据量过多时 在 IE 浏览器上面会加载异常缓慢，刚进入时页面空白无数据，导致用户体验感较差，所以需要整改优化。

    这里就需要 前后端 联调 调整 了，

    后端：需将接口由原来的传给前端的全部数据方式调整为 “分页传输” 方式，也就是前端再多传给后端两个字段值：currentPage：1，// 当前页数；pageSize：10，// 一页显示的条数（ 当然这里我们是由后端写死了：5，一页固定传给前端 5 条数据，所以前端此字段可以不传 ）

    前端：进行 懒加载 处理，也就是 需借助 Element｜InfiniteScroll 无限滚动 组件 来实现一个下拉至列表底部时，向后端请求下一页的数据用于拼接至列表数组后再次展示新的内容。【 PC 端 】

      接下来就让我们来 了解 & 如何使用 吧：（ 可参考 组件的 禁用加载 示例 ）

    前端：懒加载，移动端 需借助 Vant 2 ｜List 列表 组件 ｜基础用法 来实现一个下拉至列表底部时，向后端请求下一页的数据用于拼接至列表数组。

PC 端 ： 

InfiniteScroll 无限滚动

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

    在前端开发中，很多页面都需要实现无限滚动的效果，即

最低0.47元/天 解锁文章
雨季mo浅忆
关注
  • 19
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element UI - v-infinite-scroll无限滚动组件
Subuprogrammer的博客
08-17 9493
InfiniteScroll 无限滚动
Element-ui之ElScrollBar组件滚动条的使用方法
12-01
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。 使用的原因： 原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition
关于v-infinite-scroll的使用（踩坑心路）
Apeng_wjp的博客
09-23 1万+
时隔N日。终于发表我的第一表文章。关于v-infinite-scroll这块坑。有一说一，这个事件我不太会用。踩了很久不断的调样式。最后在大佬的指引下完成。 关于网上说的需要添加个高度。 ...
推荐优秀开源项目：Vue-Infinite-Scroll - 实现无限滚动效果的利器
最新发布
gitblog_00100的博客
03-22 948
推荐优秀开源项目：Vue-Infinite-Scroll - 实现无限滚动效果的利器 项目地址:https://gitcode.com/ElemeFE/vue-infinite-scroll Vue-Infinite-Scroll 是一个由 ElemeFE 团队开发的 Vue.js 插件，主要用于在网页中实现流畅的无限滚动加载效果。作为一个高效、易用的组件，它极大地提升了用户的浏览体验，尤其适用于...
Infinite-Scroll无限滚动加载数据
hjl416148489的博客
05-11 1108
无限滚动的实现原理：当滚动条到底离网页底部一定长度的时候，向后台发送页数并获取数据。 首先我们在页面上先放置10条数据，即第一页，每一项都是p标签： [code="java"] 1、PHP生成图片验证码 2、jQuery实现table上移下移和置顶 3、基于jQuery的cookie插件 4、jQuery仿淘宝图片放大镜插件imagezoom ...
vue滚动插件使用记录
weixin_42261369的博客
10-13 429
#滚动加载更多插件配置参数 infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中…”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。 v-infinite-scroll="loadMore"表示回调函数是loadMore infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，fa
vue-infinite-scroll的使用细节介绍
jincheng_的博客
02-06 4695
v-infinite-scroll使用
InfiniteScroll 无限滚动组件的使用
weixin_45776308的博客
08-30 2318
在无限加载数据时，又不想把所有的数据加载完成，借助分页的思想将数据加载出来。
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效 的 解决方案
一个努力学习的程序猿
10-20 6149
Vue 项目使用 InfiniteScroll 无限滚动组件在部分浏览器失效，转而使用 JS 去实现无限滚动及其相关问题的解决方案
无穷滚动加载(v-infinite-scroll)
qq_40765784的博客
09-02 1533
列表底部触发加载函数
使用Element的InfiniteScroll 无限滚动组件报错的解决
12-28
一、问题描述 在使用Element的InfiniteScroll 无限滚动时候出现以下错误： TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’ InfiniteScroll的更多用法element官网 二、解决办法 给需要使用 InfiniteScroll 的元素或者它的父级元素加上 overflow:auto; 属性即可。 <template> <div class=home> <div v-infinite-scroll=l
Element InfiniteScroll无限滚动的具体使用方法
10-15
主要介绍了Element InfiniteScroll无限滚动的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
浅谈element中InfiniteScroll按需引入的一点注意事项
11-20
大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。 针对前面element 按需引入的一些配置这里就不再详细介绍了。 那么这里讲的是在main.js写入以下...
Switch case 使用及嵌套语法
热门推荐
Mr.小灰狼_随笔
07-28 4万+
Switch case 使用及嵌套语法 目录 switch case 语句讲解 Switch 也可以嵌套 ​ 代码中 虽然没有 限制if else 能够处理的 分支 数量 ，但当分支过多时 ， 用 if else 处理会不太方便 ，而且容易出现 if else 配对出错的情况 。 所以 对于这种情况 ，实际开发中一般使用 switch 语句代替...
Vant 2 - 移动端 Vue 组件库 _ 问题记录
Mr.小灰狼_随笔
10-28 2万+
Vant 2 - 移动端 Vue 组件库 _ 问题记录 发布初衷 ： 记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题， 方便以后再次遇到类似问题 ， 能够快时查阅解决 ， 大家要是觉得有帮助的话 ， 可以收藏一下 ， 博主会不定时更新文章的 目录 基础组件 Popup 弹出层 表单组件 DatetimePicker 时间选择 Field 输入框 Form 表单 Picker 选择器 Radio 单选框 Uploader 文件上传 展示组件 List 列表 导航组件 Tab 标签页
Vue 实现输入框的聚焦
Mr.小灰狼_随笔
04-19 1万+
Vue 实现输入框的聚焦 目录 方法一、绑定 ref 方法二、使用自定义指令——官网 方法三、通过事件中的事件对象 $event，找到 input 方法四、使用原生
element 组件 InfiniteScroll 无限滚动 vue实例
05-10
InfiniteScroll 是 Element 组件库中的一个组件，它可以实现在滚动到页面底部时自动加载更多数据的功能，常用于展示长列表或分页数据。 在 Vue 实例中使用 InfiniteScroll 组件，需要先在组件中引入它： ```js import { InfiniteScroll } from 'element-ui'; export default { directives: { InfiniteScroll }, // ... } ``` 然后，将 InfiniteScroll 组件作为一个自定义指令绑定到需要实现无限滚动的元素上。例如，将其绑定到一个包含数据列表的 `ul` 元素上： ```html <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <li v-for="item in list" :key="item.id">{{ item.text }}</li> </ul> ``` 在这个例子中，`v-infinite-scroll` 指令绑定了一个名为 `loadMore` 的方法，它会在滚动到页面底部时被触发，用于加载更多数据。`infinite-scroll-disabled` 属性指定了一个布尔值，用于控制是否禁用无限滚动功能。`infinite-scroll-distance` 属性指定了一个数字，表示滚动到页面底部的距离阈值，当滚动距离小于该值时，不触发 `loadMore` 方法。 最后，在 Vue 实例中定义 `loadMore` 方法，用于加载更多数据。例如，可以在该方法中向服务器发送 AJAX 请求，获取更多数据并将其添加到数据列表中： ```js export default { directives: { InfiniteScroll }, data() { return { list: [], // 数据列表 loading: false, // 是否正在加载数据 page: 1, // 当前页码 pageSize: 10, // 每页数据量 }; }, methods: { async loadMore() { if (this.loading) return; // 如果正在加载数据，则不执行 this.loading = true; // 标记为正在加载数据 try { const res = await axios.get('/api/data', { params: { page: this.page + 1, pageSize: this.pageSize, }, }); this.list.push(...res.data); // 将新数据添加到列表中 this.page += 1; // 更新页码 } catch (err) { console.error(err); } this.loading = false; // 标记为加载数据完成 }, }, }; ``` 这样，当用户滚动到页面底部时，就会触发 `loadMore` 方法，从服务器获取更多数据并将其添加到列表中，实现无限滚动的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值