创建一个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>