【 uniapp 】导航栏适配

设置样式

{
	"pages": [ 
		//pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				// 去掉原生导航栏
				"navigationStyle": "custom"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

导航栏适配

不同的系统之间的状态栏高度不一致
uni.getSystemInfoSync()
uni.getMenuButtonBoundingClientRect()

<template>
	<view>
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="fixed">
				<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}">
					<view class="navbar-search">
						<view class="navbar-search_text">uniapp</view>
					</view>
				</view>
			</view>
			
			<!-- 设置占位 导航栏设置了fixed 使用占位的view 将固定定位的高度预留出来 方便下面的内容展示-->
			<!-- H5和微信小程序需要为fixed定位预留的高度不一致-->
			// 方案一 动态绑定状态栏和导航栏的高度
			<view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view>
			// 方案二 根据不同的设备 设置不同的高度
			<!-- #ifdef H5 -->
				<view style="height: 45px;"></view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
				<view style="height: 60px;"></view>
			<!-- #endif -->
		</view>
		// ========================================================
		<!-- 内容栏 -->
		<view class="item" v-for="(i,j) in 100" :key="j">
			内容{{i}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarStatusHeight : 0,
				navBarHeight : 45,
				navBarWidth : 375
			}
		},
		created(){
			// 获取信息 设置状态栏的高度 动态绑定占位高度
			const info = uni.getSystemInfoSync()
			this.navbarStatusHeight = info.statusBarHeight
			// console.log(info)
			
			// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
			// 条件编译 以下三个不支持胶囊样式
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
				const menuInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
				this.navBarHeight = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
				
				// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
				this.navBarWidth = menuInfo.left
				console.log(this.navBarHeight,this.navBarWidth)
			// #endif
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.navbar {
		.fixed{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			background-color: #ef475d;
			// 导航栏主要内容部分
			.navbar-content{
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				height: 45px;
				padding: 0 15px;
				.navbar-search{
					padding: 5px 0 0 10px;
					border-radius: 15px;
					width: 100%;
					height: 30px;
					background-color: #fff;
				}
			}
			
		}
	}	
</style>

不设置状态栏高度

设置了状态栏高度