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

思路：首先我们要在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);}

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

Vue实现导航栏鼠标上滑显示下滑隐藏相关推荐

在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果
在 Vue 中实现 sticky 鼠标上滑显示.下滑隐藏的效果首先在需要实现该效果的组件中,创建一个数据属性,例如: isStickyVisible: true,并将其初始值设置为 true. 在组 ...
检测鼠标上滑还是下滑
$(function () {var scrollFunc = function (e) {e = e || window.event;var t1;var t2;if (e.wheelDelta) ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
android 7.0平台客制化虚拟导航按键(隐藏NavigationBar，上滑显示NavigationBar)
如图,需求是增加一个按钮可以隐藏NavigationBar,上滑显示NavigationBar. 参考文章: Android 8.1平台客制化虚拟导航按键 Android 7.0 虚拟按键(Navig ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
钉钉导航栏分享按钮的显示/隐藏
钉钉导航栏分享按钮的显示/隐藏隐藏进行钉钉开发后,打开应用时右上角会有三个小点点"-",打开之后会显示一些分享功能或者查看链接的功能,这样对于应用的安全是存在隐患的,那么如何来 ...
Vue实现导航栏切换
使用Vue @mouseenter 鼠标移入事件 @mouseout鼠标移出事件实现导航栏鼠标移入移出效果 <!DOCTYPE html> <html lang="en& ...
android上滑隐藏动画,ListView上滑和下滑,显示和隐藏Toolbar的实现方法
1.准备Toolbar 先隐藏系统自带的actionbar,在AndroidManifest.xml文件标签中: android:theme="@style/Theme.AppCompat. ...

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

Vue实现导航栏鼠标上滑显示下滑隐藏相关推荐

最新文章

热门文章