本文主要是介绍vue3 滚动条触底监听，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题：指定区域内，显示返回的数据，要求先显示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 => {loading = truegetTask(num).then(res => {loading = falseif (res.data.code !== 0) {return}if(!bool){list.value = res.data.datareturn}list.value = list.value.concat(res.data.data) })
}
const scroll = event => {if(loading){return}let scrollTop = event.target.scrollToplet scrollHeight = event.target.scrollHeightlet offsetHeight = Math.ceil(event.target.getBoundingClientRect().height)let currentHeight = scrollTop + offsetHeightif (currentHeight >= scrollHeight) {num = num + 1//分页参数，根据实际接口自行修改即可getData(true)}
}
这篇关于vue3 滚动条触底监听的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
