vue3中实现滚动条触底加载数据

已于 2023-11-15 17:46:52 修改
阅读量889 收藏 1
点赞数 13
分类专栏： vue3 JavaScript 文章标签： vue.js javascript
于 2023-11-15 16:59:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vitoryand/article/details/134423908
版权

在给要滚动的元素中加上id属性，方便查找要滚动的内容。也要加上滚动事件，如图所示：

这里的  handleScroll  是滚动事件名称，在js中定义该名称相同的事件。首先用原生的方法获取你要滚动的元素。如图：

最后在滚动事件中根据进行判断，根据 

  • .scrollTop         容器到顶部的距离；
  • .clientHeight     容器的高度（可视区域）；
  • .scrollHeight     容器的像素高度（完整高度，包括滚动条和隐藏的内容）；

 这三个属性来判断当前滚动条是否到达底部，若已经到达底部则在判断中添加要执行的事件。 

初次编辑发布权当笔记，若有不合理之处还请见谅。感谢感谢！！！

vue2/3 - 实现容器内无限下拉滚动懒加载数据，vue下拉滚动无限加载数据功能，支持移动端手滑、pc电脑端滚动条和鼠标拖动，数据列表在一个div元素内进行滚动懒加载（详细示例代码，一键复制开箱即用
高级前端工程师
04-30 4553
vue3，vue2，nuxt，无限下拉滚动加载，懒加载，vue数据懒加载，vue3实现无限滚动加载数据，vue实现下拉滚动无限加载数据，Vue实现列表虚拟滚动，实现无限滚动加载，使用vue实现滑动滚动条来加载数据，Vue怎么实现div容器里无限滚动加载数据，如何让数据列表限制在一个块元素中，拖动滚动条加载数据，Vue中如何进行滚动加载与无限滚动_vue滚动到底部加载更多，列表的无限循环滚动，实现下拉滚动无限加载，vue非插件实现列表无限循环滚动，Vue向下滚动加载更多数据scroll，局部下拉加载，让一小块
vue 滚动分页加载（触底加载）
leng0920的博客
05-21 3782
HTMl： <div class="guest-info-wrap"> <ul class="guest-info-box"> <template v-if="picWordList && picWordList.length"> <li class="guest-info-item" v-for="(item, index) in p
Vue3项目中页面滚动加载更多的原生操作
weixin_48837605的博客
09-24 2357
效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了 步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue 使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达了界面,就像父组件传自定义属性load通知父组件做接下来的操作 <template> <div class="xtx-infinite-loading" ref="container"> <div c..
vue3项目-滚动到底部实现数据加载效果
amber_1210的博客
06-14 1202
2、在onMounted生命周期中绑定监听事件，当滚动条滚动到底部的时候加载数据。1、在实现滚动监听的DOM元素上绑定ref值。
如何在Vue2和Vue3项目中实现一个无限滚动加载数据的列表，需要考虑哪些技术细节，并且处理好数据的分页和加载状态？
最新发布
前端大白话
04-09 968
根据项目的具体特点和需求，对不同的方案进行评估和测试，选择最适合项目的无限滚动加载方案，以提供良好的用户体验和高效的开发效率。在实际开发中，可以根据项目的具体特点和需求，对不同的无限滚动加载方案进行测试和评估，甚至可以结合使用多种方案来达到最佳的效果。在无限滚动场景中，我们可以使用它来监测列表底部的占位元素是否进入视口，从而触发数据加载。通过上面的代码和技术细节，你就能在 Vue2 和 Vue3 项目里实现一个丝滑的无限滚动加载数据列表啦！在浏览器兼容性方面，监听窗口滚动事件最为通用，而使用。
vue3监听滚动条实现滚动条触底加载数据
weixin_46687032的博客
04-11 3216
vue3获取dom，监听容器滚动，实现下拉加载更多
Vue3 实现滚动加载更多
油墨香^-^的博客
08-08 3404
随着移动设备的普及，滚动加载更多已经成为了一个常见的交互方式，用户可以在滚动页面时自动加载更多的数据，这种方式避免了翻页和点击“加载更多”按钮的繁琐操作，提高了用户体验。本文将介绍如何使用 Vue3 实现滚动加载更多功能，同时提供 mock 数据，方便读者在本地调试。本文介绍了如何使用 Vue3 实现滚动加载更多功能，包括创建组件、加载数据和监听滚动事件等。希望本文能够帮助读者更好地理解 Vue3 中的setup语法糖，并在实际项目中应用。
Vue3监听滚动条触底加载更多
Xiaochen1239的博客
09-05 1027
原因：我们在实现列表或者数据的时候一般使用element-plus中的组件，table表格带有翻页组件但是现在我们的的需求满足不了，不再使用翻页需要使用下滑加载更多这时候就需要进行使用了。
vue2滚动条加载更多数据实现代码
08-31
在Vue2中实现滚动条加载更多数据是一种常见的优化用户体验的技术，通常用于长列表或无限滚动的场景。这种技术可以减少初始页面加载时的数据量，提高页面加载速度，并且当用户滚动到页面底部时，动态加载更多数据。...
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
11-27
vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> *{ ...
Ant Design Vue Table平滑滚动+触底实现懒加载More数据+鼠标悬停暂停实现方案
qq_33693344的博客
11-24 402
【代码】Ant Design Vue Table平滑滚动+触底实现懒加载More数据+鼠标悬停暂停实现方案。
vue3（上拉/触底）加载更多
weixin_44037364的博客
05-27 3474
获取可视窗口高度，滚动高度，滚动条高度。
vue3实现容器内容滚动到底，触底加载新数据
JackieDYH的博客
08-21 9361
在Vue3中，可以使用ref和onMounted钩子函数获取容器元素并监听滚动事件，判断内容是否滚动到了底部，从而触发加载新数据。在上面的示例中，使用ref获取了容器元素，items使用ref定义了列表数据，loading表示是否正在加载新数据，page表示当前页码数。函数是滚动事件的处理函数，首先获取容器元素，然后通过判断scrollTop和是否等于来判断内容是否滚动到了底部，如果是则触发loadMore加载新数据。loadMore函数首先判断是否正在加载数据，如果是则直接返回，否则设置loading。
Vue3实现滚动到容器底部时发送请求，加载新数据
stu_kk的博客
12-03 558
Vue3实现滚动到容器底部时发送请求，加载新数据
Vue3滚动加载（懒加载）
_K500的博客
02-08 2076
滚动加载Hooks，一般用于数据量较大的列表滚动，对于大数据量渲染优化处理不仅仅只有滚动加载，还可以采用虚拟滚动，关注博主，后续带给你更多的高质量博客～
Vue3中实现数据触底加载
jsbbhx的博客
06-24 318
【代码】Vue3中实现数据触底加载。
el-select滚动底部加载更多-Vue3（ElementPlus版，亲测成功）
weixin_59423799的博客
12-15 7072
最近线上环境发现一个问题，在进入页面后3s后页面即卡顿崩溃，刷新页面无效，内存剧增，经排查，是由于某一个选择框的数据由于接口一次性返回数据过多，导致浏览器处理不了，随即出现这个问题。
vue3 通过自定义指令在table中滚动加载数据
一入前端深似海
06-25 941
vue3使用elementPlus，table滚动加载
vue 实现滚动到页面底部开始加载更多
weixin_46144929的博客
04-08 1414
vue 实现滚动到页面底部开始加载更多
Vue滚动条触底加载
06-02
实现 Vue 滚动条触底加载可以采用以下步骤： 1. 在模板中使用 `v-infinite-scroll` 指令监听滚动事件。 2. 在 data 中定义一个变量 `page` 用于记录当前页数，初始值为 1。 3. 在 methods 中定义一个方法 `loadMore`，在该方法中通过发送 API 请求获取更多数据，并将当前页数 `page` 加 1。 4. 在 `v-infinite-scroll` 指令中绑定 `loadMore` 方法，并设置触底距离 `distance` 和加载完成后是否启用 `disabled` 状态。 以下是示例代码： ```vue <template> <div class="container" v-infinite-scroll="loadMore" :distance="distance" :disabled="isLoading"> <div v-for="item in items" :key="item.id">{{ item.title }}</div> <div v-if="isLoading">加载中...</div> </div> </template> <script> export default { data() { return { page: 1, items: [], isLoading: false, distance: 100, // 触底距离 }; }, methods: { loadMore() { if (this.isLoading) return; this.isLoading = true; axios.get(`/api/data?page=${this.page}`).then((res) => { this.items = [...this.items, ...res.data.items]; this.page++; this.isLoading = false; }); }, }, }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值