Vue实现导航栏鼠标上滑显示下滑隐藏

思路：首先我们要在DOM加载完毕之后获取滚轮事件，把滚轮位置赋值给data中的top变量，用watch监听top的newValue和oldValue值，当新值比旧值大的时候证明滚轮在向下滚动，触发相对应事件，反之亦然。

	// dom节点
	
	
	// 获取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 = false
					console.log('向下滚动')
				}else{
					this.navShow = true
					console.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);
	}

水平有限，还不能写到尽善尽美，希望大家多多交流，跟春野一同进步！！！