uni-app的自定义导航栏如何视频各种机型

创建一个components文件夹，创建一个navBar.vue 

<template>
	<view :style="{ paddingTop: safeAreaInsets?.top + 'rpx' }" class="nav">
		<view class="logo">
			自定义导航栏
		</view>
	</view>
</template>

<script setup lang="ts">
	// 获取屏幕区域到安全区域的距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	

</script>

<style lang="scss" scoped>
	.nav{
		padding-top: 20px;
		display: flex;
		background-color: #1296db;
	
		
	}
	.logo{
		 width: 100%;
		 height: 64rpx;
		 padding-top: 20rpx;
		 color: #fff;
		 display: flex;
		 justify-content: center;
		 
		 
	}

</style>

在pages.json中

"pages": [
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "登录",
				// 启⽤⾃定义导航栏
			   "navigationStyle": "custom",
				// 将导航栏⽂字的颜⾊设置为⽩⾊
				"navigationBarTextStyle": "white"
			}
		},
}

在哪里用到自定义导航栏在哪里引入

<template>
	<!-- 自定义导航栏 -->
	<NavBar></NavBar>
	<view>
	
		
		  
	登录
	</view>
</template>

<script setup lang="ts">
	import NavBar from "../components/navBar/navBar.vue"
	

	
</script>

<style>
	/* 自定义导航栏样式 */
	.custom-navbar {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 44px; /* 根据需要调整高度 */
	  background-color: #42b983; /* 根据需要调整背景颜色 */
	  color: white; /* 根据需要调整文字颜色 */
	  font-size: 18px; /* 根据需要调整字体大小 */
	}
	
	.navbar-title {
	  font-weight: bold; /* 根据需要调整字体粗细 */
	}

</style>