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

JavaScript滚动事件处理与元素定位

原创已于 2023-11-15 17:46:52 修改 · 992 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2023-11-15 16:59:17 首次发布

vue3 同时被 2 个专栏收录

1 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文介绍了如何在HTML元素中设置id属性并监听滚动事件，使用handleScroll函数获取滚动元素，通过scrollTop、clientHeight和scrollHeight属性判断滚动位置，以便在底部时执行特定操作。

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

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嘎你肾虚的腰子

关注关注

12
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2/3 - 实现容器内无限下拉滚动懒加载数据，vue下拉滚动无限加载数据功能，支持移动端手滑、pc电脑端滚动条和鼠标拖动，数据列表在一个div元素内进行滚动懒加载（详细示例代码，一键复制开箱即用

高级前端工程师

04-30

4729

vue3，vue2，nuxt，无限下拉滚动加载，懒加载，vue数据懒加载，vue3实现无限滚动加载数据，vue实现下拉滚动无限加载数据，Vue实现列表虚拟滚动，实现无限滚动加载，使用vue实现滑动滚动条来加载数据，Vue怎么实现div容器里无限滚动加载数据，如何让数据列表限制在一个块元素中，拖动滚动条加载数据，Vue中如何进行滚动加载与无限滚动_vue滚动到底部加载更多，列表的无限循环滚动，实现下拉滚动无限加载，vue非插件实现列表无限循环滚动，Vue向下滚动加载更多数据scroll，局部下拉加载，让一小块

vue 滚动分页加载（触底加载）

leng0920的博客

05-21

3867

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

1 条评论您还未登录，请先登录后发表或查看评论

Vue3项目中页面滚动加载更多的原生操作

weixin_48837605的博客

09-24

2434

效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue 使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达了界面,就像父组件传自定义属性load通知父组件做接下来的操作 <template> <div class="xtx-infinite-loading" ref="container"> <div c..

uni-app使用scroll-view自定义下拉刷新(vue3+ts)

m0_60708088的博客

07-04

2387

uni-app使用scroll-view自定义下拉刷新(vue3+ts)

RuoYi-Vue3虚拟滚动实现：大数据列表性能优化方案

最新发布

gitblog_01077的博客

09-09

1095

你是否遇到过这样的场景：系统管理后台用户数据突破10万条后，每次加载页面都像经历一场"漫长的等待"？表格渲染卡顿3秒+、滚动时页面掉帧、操作响应延迟...这些问题不仅影响管理员的工作效率，更会让整个系统显得"笨重"。 **读完本文你将获得：** - 理解虚拟滚动（Virtual Scrolling）的核心原理与实现机制 - 掌握在RuoYi-Vue3框架中从零构建高性能虚拟滚动列表的完整方案 -...

uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能

qq_39691676的博客

04-28

1059

计算方式:swiper高度 = page高度 - tabs高度 - search高度。

vue3项目-滚动到底部实现数据加载效果

amber_1210的博客

06-14

1377

2、在onMounted生命周期中绑定监听事件，当滚动条滚动到底部的时候加载数据。1、在实现滚动监听的DOM元素上绑定ref值。

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

weixin_46687032的博客

04-11

3358

vue3获取dom，监听容器滚动，实现下拉加载更多

vue2滚动条加载更多数据实现代码

08-31

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> *{ ...

vue实现滑动到底部加载更多效果

10-16

在Vue.js中实现滑动底部加载数据的基本原理是，通过监测滚动条位置来判断用户是否滚动到了页面的底部。一旦用户滚动到了底部，就触发数据的加载。通常有两种方式来监测滚动位置：一种是监听滚动事件，另一种是使用...

抖音登录流程与原理详解

油墨香^-^的博客

08-08

3813

本文介绍了抖音的两种登录方式：1. 抖音App内账号登录（基于Token认证机制），支持手机验证码、密码和第三方账号登录；2. 第三方应用授权登录（基于OAuth2.0授权码模式），通过授权码换取访问凭证，最长授权周期可达195天。文章还解析了二维码扫码登录原理，并提供了账号安全管理的路径说明，强调Token与设备绑定的安全性。

Vue3监听滚动条触底加载更多

Xiaochen1239的博客

09-05

1081

原因：我们在实现列表或者数据的时候一般使用element-plus中的组件，table表格带有翻页组件但是现在我们的的需求满足不了，不再使用翻页需要使用下滑加载更多这时候就需要进行使用了。

vue3（上拉/触底）加载更多

weixin_44037364的博客

05-27

3705

获取可视窗口高度，滚动高度，滚动条高度。

vue3实现容器内容滚动到底，触底加载新数据

热门推荐

JackieDYH的博客

08-21

1万+

在Vue3中，可以使用ref和onMounted钩子函数获取容器元素并监听滚动事件，判断内容是否滚动到了底部，从而触发加载新数据。在上面的示例中，使用ref获取了容器元素，items使用ref定义了列表数据，loading表示是否正在加载新数据，page表示当前页码数。函数是滚动事件的处理函数，首先获取容器元素，然后通过判断scrollTop和是否等于来判断内容是否滚动到了底部，如果是则触发loadMore加载新数据。loadMore函数首先判断是否正在加载数据，如果是则直接返回，否则设置loading。

Vue3实现滚动到容器底部时发送请求，加载新数据

stu_kk的博客

12-03

651

Vue3实现滚动到容器底部时发送请求，加载新数据

Vue3滚动加载（懒加载）

_K500的博客

02-08

2177

滚动加载Hooks，一般用于数据量较大的列表滚动，对于大数据量渲染优化处理不仅仅只有滚动加载，还可以采用虚拟滚动，关注博主，后续带给你更多的高质量博客～

Vue3中实现数据触底加载

Mr.Wang开发日常

06-24

363

【代码】Vue3中实现数据触底加载。

weixin_59423799的博客

12-15

7866

最近线上环境发现一个问题，在进入页面后3s后页面即卡顿崩溃，刷新页面无效，内存剧增，经排查，是由于某一个选择框的数据由于接口一次性返回数据过多，导致浏览器处理不了，随即出现这个问题。

uniapp vue3滚动条触底监听

03-14

<think>好的，用户想知道在UniApp和Vue3中如何实现滚动条触底监听。首先，我需要回忆一下UniApp的相关知识。记得UniApp有页面生命周期函数，比如onPageScroll和onReachBottom，但根据引用[1]，onPageScroll只在页面级别的.vue文件中有效，如果在scroll-view组件里使用是不会触发的，这时候应该用scroll-view自己的@scroll事件。然后用户提到使用Vue3，引用[2]说UniApp对Vue3的支持尤其是script setup写法可能有问题，比如生命周期钩子的引入问题。所以可能需要用setup函数的方式。此外，引用[3]和[4]提到了在滚动到底部时加载数据的情况，可能需要处理分页和防止重复请求。接下来，我需要分情况讨论：普通页面滚动和scroll-view组件的滚动。对于普通页面，使用onReachBottom生命周期，但要注意在Vue3中的引入方式。对于scroll-view，需要用@scroll事件，并判断scrollTop和scrollHeight的关系，同时可能需要防抖处理。还要考虑Vue3中的写法，比如使用setup函数，以及如何引入生命周期钩子。另外，引用[4]中的代码展示了如何触底加载数据，可能需要结合这些示例来给出具体代码。最后，确保回答结构清晰，分步骤说明，并提供注意事项和相关问题，帮助用户全面理解。</think>### 如何在UniApp和Vue3中实现滚动条触底监听 #### 一、实现方式分类在UniApp中，滚动触底监听需根据**滚动容器类型**选择不同方案： 1. **普通页面滚动**（如`<view>`布局）：使用UniApp页面生命周期函数 2. **自定义滚动容器**（如`<scroll-view>`）：使用组件级事件监听 #### 二、普通页面滚动实现 **步骤说明：** 1. **声明生命周期钩子** 在`<script setup>`中无法直接使用`onReachBottom`，需改用`setup()`函数： ```vue <script> import { onReachBottom } from '@dcloudio/uni-app' export default { setup() { onReachBottom(() => { console.log('触底事件触发') // 加载数据逻辑 }) } } </script> ``` 注意：这是Vue3兼容UniApp生命周期的特殊写法[^2] 2. **配置页面距离触底的阈值** 在`pages.json`中设置触发距离： ```json { "path": "pages/list/list", "style": { "onReachBottomDistance": 100 // 单位px，默认50 } } ``` #### 三、scroll-view组件实现 **步骤说明：** 1. **绑定滚动事件** ```vue <scroll-view scroll-y @scroll="handleScroll" :scroll-top="scrollTop" style="height: 100vh;" >  </scroll-view> ``` 2. **Vue3响应式变量声明** ```vue <script> import { ref } from 'vue' export default { setup() { const scrollTop = ref(0) const handleScroll = (e) => { scrollTop.value = e.detail.scrollTop // 触底判断逻辑 } return { scrollTop, handleScroll } } } </script> ``` 3. **触底判断算法** 需结合容器高度和滚动位置： ```javascript const checkBottom = (e) => { const { scrollHeight, // 总内容高度 scrollTop, // 当前滚动位置 clientHeight // 可视区域高度 } = e.detail if (scrollHeight - scrollTop <= clientHeight + 100) { console.log('距离底部100px时触发') // 执行加载操作 } } ``` #### 四、优化建议 1. **防抖处理**（防止高频触发） ```javascript let timer = null const handleScroll = (e) => { clearTimeout(timer) timer = setTimeout(() => { checkBottom(e) }, 300) } ``` 2. **加载状态锁**（防止重复请求） ```javascript const loading = ref(false) const loadData = async () => { if (loading.value) return loading.value = true await fetchData() loading.value = false } ``` 3. **滚动复位问题**（参考引用[3]）当数据更新导致滚动异常时，可强制复位： ```javascript onUpdated(() => { if (scrollHeight异常) { scrollTop.value = 0 } }) ``` #### 五、注意事项 1. **scroll-view必须指定高度**，否则无法触发滚动事件 2. iOS平台可能出现滚动惯性导致的触底误判，建议增加触发阈值 3. 分页加载需配合`totalPage`验证边界条件[^4]

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

.scrollTop 容器到顶部的距离；

.clientHeight 容器的高度（可视区域）；

.scrollHeight 容器的像素高度（完整高度，包括滚动条和隐藏的内容）；