HomeLease/mixins/page-scroll-mixin.js

/**
 * 页面滚动监听 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)
      }
    })
  },
}