滑动到底部加载

滑动到底部自动加载的实现

我们常常会碰到数据条数很多，需要分页显示的情况。对于移动端页面，我们一般会用每次滚动到接近页面底部时，加载更多（下一页）数据的方式。本文就来介绍下滑动到底部无限加载的实现。

基本监测函数实现实现

元素下方没显示的高度值 = 元素总高度 - 元素垂直方向滚动了的距离 - 元素可视区域高度

• 监听显示数据内容的元素的滚动事件。
• 每次元素滚动时，若此时不在加载数据，则计算元素下方没显示的高度值。如果其值小于我们设定的触发加载的值，则加载，显示更多数据；否则什么都不做。
• 如果没有更多的内容可显示，则不再监视元素的滚动事件
  对其抽取出一个监听滚动的hooks，因为其他地方我们也可能用到类似的函数

import { onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import { throttle } from 'underscore'
//此函数可传入对应监听的组件，如果没传入，则默认监听window的滚动
export default function useScroll(elRef) {
  let el = window

  const isReachBottom = ref(false)

  const clientHeight = ref(0)
  const scrollTop = ref(0)
  const scrollHeight = ref(0)

  // 防抖/节流
  const scrollListenerHandler = throttle(() => {
    if (el === window) {
      clientHeight.value = document.documentElement.clientHeight
      scrollTop.value = document.documentElement.scrollTop
      scrollHeight.value = document.documentElement.scrollHeight
    } else {
      clientHeight.value = el.clientHeight
      scrollTop.value = el.scrollTop
      scrollHeight.value = el.scrollHeight
    }
//当视口高度+已滚动的高度大于元素高度时，说明已到达底部，可进行相应操作拉取数据
    if (clientHeight.value + scrollTop.value>= scrollHeight.value) {
      console.log("滚动到底部了")
      isReachBottom.value = true
    }
  }, 100)
  
  onMounted(() => {
    if (elRef) el = elRef.value
    el.addEventListener("scroll", scrollListenerHandler)
  })
  
  onUnmounted(() => {
    el.removeEventListener("scroll", scrollListenerHandler)
  })
//导出的这些值可以在其他地方使用
  return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}

其他功能的实现：

下一页数据的加载

可以把数组放在一个数组里，请求下一页数据时把请求到的数据push到数组里，并用cuurrentindex来维护要请求的页数。当检测到滑到底部，便请求对应页数里的数据，解构后push

缓存的实现

当切换页面时，组件会被销毁重建，数据会重新请求，如果需要，可以用keepalive加上缓存，并用include选择需要缓存的组件

切换时回到固定的高度

在onActiivated生命周期内，用scrollTo方法使组件滚动，滚到到检测函数里记录的位置即可，

onActivated(() => {

  homeRef.value?.scrollTo({

   top: scrollTop.value

  })

})