思路：首先我们要在DOM加载完毕之后获取滚轮事件，把滚轮位置赋值给data中的top变量，用watch监听top的newValue和oldValue值，当新值比旧值大的时候证明滚轮在向下滚动，触发相对应事件，反之亦然。
// dom节点<template><div id = "nav-bar" :class = "navShow ? 'navOn' : 'navOff'">// nav内容</div></template>// 获取top值data() {return {top:''}},// 获取浏览器滚轮mounted() {window.addEventListener('scroll', () => {this.top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset})},// 监听top值的变化watch:{top(newValue,oldValue){// 等新值大于100的时候再做变化（优化一下）if(newValue > 100){if(newValue > oldValue){this.navShow = falseconsole.log('向下滚动')}else{this.navShow = trueconsole.log('向上滚动')}}}}// css样式.navOn{position: fixed;top: 0;left: 0;right: 0;transition: all 0.2s ease-in-out 0.2s;transform: translateZ(0);}.navOff{position: fixed;top: 0;left: 0;right: 0;transition: all 0.2s ease-in-out 0.2s;transform: translate3d(0,-100%,0);}
水平有限，还不能写到尽善尽美，希望大家多多交流，跟春野一同进步！！！
