54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
/**
|
||
* 页面滚动监听 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)
|
||
}
|
||
})
|
||
},
|
||
}
|