问题的产生：在详情页面，我们对拖动页面绑定了scroll事件，实现对header区域的渐隐渐现效果，如图1。不过这个事件是绑定在全局window对象上的。这意味着，尽管我们是在detail/header子组件上绑定的事件，但其他组件也会受到影响。
图1 在详情页面拖动页面时header区域动画
当我们离开详情页面，在主页面拖动时，会发现，在detail/header子组件上绑定的事件依然被触发并执行了相关代码（证据是：控制台打印出来的内容，是在detail/header子组件中对scroll事件触发时，执行的回调函数handleScroll中设置的）。
图2 在主页面拖动时的情况
在子组件的具体元素上绑定的事件，就只在该元素上生效，例如对div1绑定了一个点击事件，那么只有在点击该div时，才会执行handleClick。但全局事件的绑定，影响却是全局的，这就经常造成bug。
<div id="div1" @click="handleClick">
</div>
解决：在退出绑定了全局事件的页面时，对其中的全局事件进行解绑。
由于在项目的App.vue使用了keep-alive，会多出两个生命周期钩子函数 activated 和 deactivated，前者只要页面一被展示，就会执行；后者只要页面即将被隐藏或替换成新页面，就会执行。在这两个钩子函数中分别完成对全局事件的绑定和解绑。
图3 全局事件的绑定与解绑
这里之所以对window全局对象绑定了事件，是因为页面上的scroll操作的有效区域是在整个页面上，而不是某个局部dom元素上。解除绑定后，在其他页面进行scroll，就不会出现类似在详情页面scroll的效果了。
网友评论