vue3监听滚动条实现滚动条触底加载数据
vue3获取dom,监听容器滚动,实现下拉加载更多
·
看过很多文章,都是通过document.getElementById获取DOM元素,操作DOM。这样写不好,vue官方文档不推荐直接操作DOM,vue的核心思想是数据驱动视图,即通过数据的变化来更新DOM。如果直接操作DOM,可能导致视图和数据不同步,并且难以维护和排查bug。其次操作DOM是极其损耗性能,代码的质量会降低
最好是通过ref来获取dom容器
<template>
//滚动元素
<div ref="scrollRef">
<div>滚动内容</div>
<div>滚动内容</div>
<div>滚动内容</div>
<div>滚动内容</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getData } from '/@/api/index'
const scrollRef = ref()//名字需要跟上面模板中定义的一样
const currentPage = ref(1)//当前页数
const pageSize = ref(10)//分页大小
const total = ref(0)//数据总量
const data = ref()//接口获取的数据
onMounted(async () => {
let res = await getData(currentPage.value, pageSize.value)//调接口获取数据
//实际操作根据自己的接口来
total.value = res.total
data.value = res.data
scrollRef.value.addEventListener('scroll',async () => {
const { scrollTop, offsetHeight, scrollHeight } = scrollRef.value
if (scrollTop + offsetHeight >= scrollHeight) {
//滚动条到达底部
if (data.value.length < total.value) {
//数据为加载完,继续赋值
currentPage.value++
let res = await getData(currentPage.value, pageSize.value)
res.data.forEach((element) => {
data.push(element)
})
}
}
})
})
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)