vue怎么让元素监听页面滚动

Vue本身并没有提供监听页面滚动的方法，但是可以通过以下两种方式来实现元素监听页面滚动：

1. 使用原生JS监听滚动事件，然后在Vue组件中调用相应的方法处理滚动事件。

<template>
  <div class="container" ref="container" @scroll="handleScroll">
    <!-- 这里写需要监听滚动的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      // 处理滚动事件的方法
    }
  },
  mounted() {
    // 监听滚动事件
    this.$refs.container.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听
    this.$refs.container.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

2. 使用第三方库vue-scroll监听元素滚动。

<template>
  <vue-scroll :on-scroll="handleScroll">
    <!-- 这里写需要监听滚动的内容 -->
  </vue-scroll>
</template>

<script>
import VueScroll from 'vue-scroll';

export default {
  components: {
    VueScroll
  },
  methods: {
    handleScroll() {
      // 处理滚动事件的方法
    }
  }
}
</script>

注意：第二种方式需要安装vue-scroll依赖，可以使用npm或yarn进行安装。