js滑动框触底加载

最新推荐文章于 2024-02-01 09:43:25 发布

菜鸡的崛起

最新推荐文章于 2024-02-01 09:43:25 发布

阅读量296

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/l_____z______z/article/details/128443526

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

// 是否下滑加载
const toScroll = ref(true)
// 加载框显示
const spinning = ref(false)
//获取滚动窗口的元素
const scrollDom = document.getElementsByClassName('article-list')

// 触底加载
const scrollOload = () =>{
  // 滚动的高度
  const scrollTop = scrollDom[0].scrollTop
  // 获取滚动的高度（获取整个html的高度包含隐藏内容的高度）
  const scrollHeight = scrollDom[0].scrollHeight
  // 获取屏幕(浏览器)高度
  const clientHeight = scrollDom[0].clientHeight
  // 滚动的距离 + 屏幕高度 - 内容高度 >= 0 表示滚动到底部了(下拉加载判断条件)
  if (scrollTop + clientHeight - scrollHeight >= -10) {
    if (toScroll.value) {
      spinning.value = true
      toScroll.value = false
      // 滚动至底部后请求数据
      nextTick(()=>{
		// 请求数据
		...
      })
    }
  }
}
....
onMounted(()=>{
  // 滚动窗口绑定滚动事件
  scrollDom[0].addEventListener('scroll', scrollOload, true)
})