vue---museui解决底部/顶部导航栏位置固定问题

移动端页面通常会包括顶部导航或底部导航栏，导航栏一般固定在页面上。

问题描述如下：

导航栏未固定，顶部红色导航栏会随着页面下滚而消失，底部的蓝色导航栏会根据页面内容变化而上下浮动，视觉体验非常不好。

解决方法：

给导航栏添加css样式

（1）底部蓝色导航栏，设置样式position:fixed; left:0; bottom:0;width: 100%;z-index: 1000;代码如下：

<template><!-- 底部导航栏 --><div id="nav"><mu-bottom-nav style="background-color: #2196f3;color: hsla(0,0%,100%,.7);"><router-link to="/student"><mu-bottom-nav-item title="首页" icon="home"></mu-bottom-nav-item></router-link><router-link to="/studyResource"><mu-bottom-nav-item title="学习资源" icon="local_library"></mu-bottom-nav-item></router-link><router-link to="/discuss"><mu-bottom-nav-item title="讨论交流" icon="record_voice_over"></mu-bottom-nav-item></router-link><router-link to="/PersonalCenter"><mu-bottom-nav-item title="个人中心" icon="account_circle"></mu-bottom-nav-item></router-link></mu-bottom-nav></div>
</template><script>
export default {data() {return {// shift: "index"};}
};
</script><style lang="less">
.mu-bottom-item-active {color: white;
}
a {color: rgba(218, 214, 214, 0.7);
}
// 固定底部导航栏位置
#nav {position: fixed;width: 100%;left: 0;bottom: 0;z-index: 1000;
}
</style>

（2）顶部红色导航栏，由于多个页面分别都包含不同名称(如：学习资源，课程知识地图等等)的顶部导航栏，为顶部导航栏添加相同class="header_title"

在App.vue中为它们设置统一样式position: fixed;width: 100%;left: 0;top: 0;z-index: 1000;

<template><div id="app"><router-view/><!-- bottom-nav 底部导航栏 --><bottom-nav v-show="showNav"></bottom-nav></div>
</template><script>
import BottomNav from "./components/BottomNav";
export default {name: "App",data() {return {showNav: false};},components: {"bottom-nav": BottomNav}
};
</script><style>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.header_title {position: fixed;width: 100%;left: 0;top: 0;z-index: 1000;
}
</style>

完美解决问题，导航栏固定住啦~~ 效果图展示如下：

vue---museui解决底部/顶部导航栏位置固定问题相关推荐

微信小程序解决自定义顶部导航栏被键盘挤压的问题
解决思路: 先把键盘的adjust-position置为false,防止键盘自动挤压.然后计算键盘弹起时,input实际被遮挡的高度,通过代码来上滑相应的距离 wxml代码: < ...
android 固定底部导航,如何设置android底部导航栏位置固定在android
请帮我设置底部导航栏位置固定在底部, ,因为我在输入editText字段时遇到问题,底部导航栏向上移动并覆盖其他领域如何设置android底部导航栏位置固定在android 代码: xmlns:and ...
Vue自定义网页顶部导航栏
Vue自定义web网页顶部导航栏说明:此组件是为论坛类项目定制的一个实用的顶部导航栏,当然也可以用于其他的Web项目,只需要稍作修改便可以达到想要的效果.其中导航栏包含了搜索栏,用户头像,以及基本的 ...
微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
犀牛Rhino 6破解版安装后底部与导航栏英文解决方法及在Rhino中使用python编译器
在下载网上Rhino 6建模软件后发现并不是全部破解,底部与导航栏未译多次重装的情况下,不要紧张再重装一遍重装后要注意,换到别的盘符时必须使用Rhino 6空格都不能少再选择语言时选择繁体中文则 ...
VUE写一个顶部导航栏
最近一个实验要做一个中超足球联赛的数据库设计,我打算采用springboot+vue来完成,现在是从零开始学习vue的过程,先试着写一个顶部导航栏.效果如下: 新建一个navbar的组件首先在APP ...
vue实现仿DJI大疆官网顶部导航栏组件
页面进入时,导航栏背景色为透明: 鼠标移入时,导航栏背景变白,鼠标停留的标签字体颜色变换,出现底边框,若有二级下拉菜单,则平滑向下弹出菜单: gitee仓库地址:https://gitee.com/Y ...
html固定顶部导航栏和底部导航栏
固定顶部导航栏,在样式(css)中加入以下代码 position: fixed;z-index: 1000;right: 0;bottom: 0;left: 0px;top: 0px;width: 1 ...

vue---museui解决底部/顶部导航栏位置固定问题

vue---museui解决底部/顶部导航栏位置固定问题相关推荐

最新文章

热门文章