【vue 监听页面滑动到底部】

IntersectionObserver

在 Vue 中监听触底可以通过使用IntersectionObserver实现。IntersectionObserver是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时，会触发IntersectionObserver的回调函数。

以下是一个监听触底的示例：

在mounted钩子函数中创建IntersectionObserver实例，并监听容器底部的元素。在handleObserve回调函数中判断当前元素是否可见，如果可见则触发加载更多数据的逻辑。

scroll 事件监听器

在 Vue 中监听页面滑动到底部的方法如下：

1. 创建一个 scroll 事件监听器，并将事件绑定在根元素上（window 或 document.body）。

mounted() {
  window.addEventListener('scroll', this.handleScroll)
}

2. 在事件处理函数 handleScroll 中，判断页面滚动到底部的条件，如果条件成立，执行自定义事件 scroll-to-bottom。

methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    const clientHeight = document.documentElement.clientHeight || window.innerHeight
    if (scrollTop + clientHeight >= scrollHeight) {
      this.$emit('scroll-to-bottom')
    }
  }
}

3. 在需要监听滚动到底部的组件中，使用 $on 方法监听自定义事件 scroll-to-bottom，并执行相应的操作。

<template>
  <div>
    <div v-for="item in list" :key="item.id">{{ item.text }}div>
  div>
template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.loadMore()
    this.$on('scroll-to-bottom', this.loadMore)
  },
  methods: {
    loadMore() {
      // TODO: 加载更多数据
    }
  }
}
script>