vue 监听页面滚动

---

一、全局监听页面滚动

在main.js或你的入口文件中添加一个全局的滚动事件监听器。

// 在 main.js 或入口文件中
app.config.globalProperties.$onScroll = function (callback) {window.addEventListener('scroll', callback);
};app.config.globalProperties.$offScroll = function (callback) {window.removeEventListener('scroll', callback);
};

在组件中使用：

export default {mounted() {this.$onScroll(this.handleScroll);},beforeUnmount() {this.$offScroll(this.handleScroll);},methods: {handleScroll() {console.log('页面正在滚动');// 在这里编写你的滚动逻辑}}
}

---

二、组件内监听页面滚动

在单个组件内监听滚动事件，可以在该组件的mounted钩子中添加事件监听器，在beforeUnmount钩子中移除它，以避免内存泄漏。

export default {mounted() {window.addEventListener('scroll', this.handleScroll);},beforeUnmount() {window.removeEventListener('scroll', this.handleScroll);},methods: {handleScroll() {console.log('页面正在滚动');// 在这里编写你的滚动逻辑}}
}

---

注意事项：

防抖和节流：频繁的滚动事件可能会对性能产生影响，尤其是在移动设备上。使用lodash的_.throttle或_.debounce可以帮助减少这种情况的发生。例如，使用节流：

import _ from 'lodash';export default {mounted() {this.handleScroll = _.throttle(this.handleScroll, 200); // 每200毫秒最多触发一次handleScroll函数window.addEventListener('scroll', this.handleScroll);},beforeUnmount() {window.removeEventListener('scroll', this.handleScroll);},methods: {handleScroll() {console.log('页面正在滚动');// 在这里编写你的滚动逻辑}}
}

使用Vue 3 Composition API：如果使用的是Vue 3，可以更灵活地使用Composition API，例如onMounted和onUnmounted钩子：

import { onMounted, onUnmounted } from 'vue';
import _ from 'lodash'; // 如果你需要防抖或节流功能的话export default {setup() {const handleScroll = _.throttle(function() {console.log('页面正在滚动');// 在这里编写你的滚动逻辑}, 200); // 每200毫秒最多触发一次handleScroll函数（节流）onMounted(() => {window.addEventListener('scroll', handleScroll);});onUnmounted(() => {window.removeEventListener('scroll', handleScroll);});}
}