/** * 页面滚动监听 Mixin * 用于自动处理 custom-navbar 组件的滚动事件传递 * * 使用方法: * 1. 在页面中引入此 mixin * 2. 确保 custom-navbar 组件有 ref="customNavbar"(默认)或自定义 ref * 3. 自动处理滚动事件传递 * * 配置选项: * - scrollRefs: 需要传递滚动事件的组件 ref 数组,默认为 ['customNavbar'] * * 使用示例: * * // 基础用法(使用默认 ref="customNavbar") * export default { * mixins: [PageScrollMixin], * // ... 其他配置 * } * * // 自定义 ref 名称 * export default { * mixins: [PageScrollMixin], * scrollRefs: ['myNavbar'], // 自定义 ref 名称 * // ... 其他配置 * } * * // 多个组件 * export default { * mixins: [PageScrollMixin], * scrollRefs: ['customNavbar', 'floatingButton'], // 多个组件 * // ... 其他配置 * } */ export default { data() { return { // 默认的滚动组件 ref 列表 scrollRefs: this.$options.scrollRefs || ['customNavbar'], } }, // 页面生命周期 onPageScroll(e) { // 自动将页面滚动事件传递给所有配置的组件 this.scrollRefs.forEach(refName => { if (this.$refs[refName] && typeof this.$refs[refName].handlePageScroll === 'function') { this.$refs[refName].handlePageScroll(e) } }) }, }