导航栏

技术点

scroll 事件 组件插槽

目录结构

└─ src
  └─ components
     └─ Header                 # 全局头部组件
        ├─ HeaderBar           # 一般页面头部
        └─ HeaderScrollBar     # 滚动吸顶头部，如影视详情、影人详情等页面头部使用

功能与实现

HeaderBar 组件仅作为展示型组件，HeaderScrollBar 组件在 HeaderBar 组件上增加了滚动变更内容的功能，以下仅介绍 HeaderScrollBar 组件的功能。

功能

当页面滚动时，改变 header 背景色与展示内容，如影视详情、影人详情等页面

实现

注册 window.addEventListener("scroll", function(){ }) 事件，监听页面滚动，根据滚动的高度做不同的处理。

核心代码

• 如果页面 keep-alive ，会先后触发 mounted->activated 生命周期，因此用 isBindScroll 标志位判断是否已绑定 scroll 事件监听，已监听则 activated 生命周期中不需要再次监听
• 在离开 keep-alive 页面，但页面未被销毁时，页面的监听事件会被持续触发，需要在 deactivated 中移除监听

// 绑定监听，绑定标志置为 true
mounted() {
    this.isBindScroll = true;
    window.addEventListener("scroll", this.handleScroll);
},

// 页面销毁前，接触兼容，绑定标志置为 true
beforeDestroy() {
    this.isBindScroll = false;
    window.removeEventListener("scroll", this.handleScroll);
},

// keep-alive 页面首次进入时，在 mounted 中已设置监听，不需要再次绑定监听事件
activated() {
    if (this.isBindScroll) return;
    window.addEventListener("scroll", this.handleScroll);
},

// keep-alive 销毁时移除监听
deactivated() {
    this.isBindScroll = false;
    window.removeEventListener("scroll", this.handleScroll);
},