vue3 滚动条触底监听

最新推荐文章于 2025-03-21 19:24:31 发布

-小C_

最新推荐文章于 2025-03-21 19:24:31 发布

阅读量1.8k

点赞数 4

分类专栏： vue3随手记文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_75107188/article/details/136402351

版权

文章描述了解决在指定区域内按需滚动加载数据的问题，通过监听滚动条位置，当滚动到底部时，自动请求并合并下20条数据。使用了Vue的ref属性和scroll事件，以及分页逻辑控制数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：指定区域内，显示返回的数据，要求先显示20条，区域超出部分滚动显示，对滚动条进行监听，滚动条触底后，继续显示下20条...

解决过程：

1.在区域的div上，添加@scroll事件和ref属性

2.scrollTop值是滚动位置，根据滚动条的变化而变化，可以理解为是卷或者滚起来的高度

3.scrollHeight值是内容区域的高度

4.offsetHeight值是显示区域的高度，是padding、border、水平滚动条相加的高度，注意并不包含margin的高度

5.当scrollTop+offsetHeight大于等于内容区域本身的高度时，代表滚动条到底了，进行对数据的处理（此处根据实际情况写逻辑代码即可）

6.设立boolean值判断是否是请求第一页数据或者请求其他页数据并进行拼接

解决结果：

<div @scroll="scroll($event)" ref="scrollRef">
   <div v-for="item in list" :key="item.id">
       <div>{
  {item.name}}</div>
   </div>
</div>
let list = ref([])
let loading = false
let num = 1
const scrollRef= ref(null)
const getData = bool =&

最低0.47元/天解锁文章