vue3监听滚动条实现滚动条触底加载数据
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
看过很多文章,都是通过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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)