uniapp实战 —— 自定义顶部导航栏

效果预览

下图中的红框区域

范例代码

src\pages.json

配置隐藏默认顶部导航栏

     "navigationStyle": "custom", // 隐藏默认顶部导航

src\pages\index\components\CustomNavbar.vue

封装自定义顶部导航栏的组件（要点在于：获取屏幕边界到安全区域距离）

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script><template><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><view class="logo"><!-- <image class="logo-image" src="@/static/images/logo.jpg"></image> --><text class="logo-title">DOS圆梦大家庭</text><text class="logo-text">诚挚缘分 成就梦想</text></view></view>
</template><style lang="scss">
.navbar {background-image: url(@/static/images/navigator_bg.png);background-size: cover;display: flex;.logo {display: flex;align-items: center;height: 86rpx;padding: 20rpx;.logo-image {width: 40rpx;height: 40rpx;}.logo-title {font-size: 32rpx;color: #fff;font-weight: bold;}.logo-text {flex: 1;line-height: 28rpx;color: #fff;margin: 2rpx 0 0 20rpx;padding-left: 20rpx;border-left: 1rpx solid #fff;font-size: 26rpx;}}
}
</style>

src\pages\index\index.vue

在目标页面中导入使用

import CustomNavbar from './components/CustomNavbar.vue'

<CustomNavbar />