uni app 手机端导航栏自定义

uni app 手机端导航栏自定义

第一步：明确顶部导航栏的构成（手机自带的顶部菜单+开发的顶部菜单栏）

获取手机自带的顶部导航栏

<view class="navigation_bar" >	
	<!-- 这里是顶部导航栏 -->
</view>
<style lang="less">
.navigation_bar {
   height: var(--status-bar-height);  // 获取手机顶部导航栏
   width: 100%;  
   background-color: #808fb1;
}

---

然后是自定义项目内的导航栏
uni app自带狗都不用（bushi）；下载插件：https://ext.dcloud.net.cn/plugin?id=52（直接下载到uni app你的项目里面），不需要任何引入，直接用

<view class="navigation_bar" >
		<!-- 这里是顶部导航栏 -->
	</view>
	<view>
		<uni-nav-bar class="tabs" left-icon="arrowleft" title="标题" @clickLeft="back" />
	</view>
	<script>
		export default {
			components: {},
			data() {
				return {
				}
		}
	}
	</script>
	<style lang="less">
	.navigation_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #808fb1;
	}
</style>

这样就行了，剩下的关于顶部导航栏样式的问题，可以直接看文档，个人适用，其他建议可留言