uniapp开发小程序，自定义顶部导航栏

### 如何在 UniApp 中开发带有自定义顶部导航栏的小程序 #### 配置 `manifest.json` 文件 在 UniApp 开发中，如果需要实现自定义顶部导航栏，则需先修改项目的配置文件 `manifest.json`。具体操作是在应用的页面路径配置项中加入 `"navigationStyle": "custom"` 的属性[^1]。 ```json { "pages": [ { "path": "pages/cargo/shipments", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom" } } ] } ``` 此设置会移除默认的顶部导航栏，从而允许开发者自行设计和布局导航区域[^2]。 --- #### 动态计算导航栏高度 由于不同设备屏幕尺寸以及是否存在刘海屏等因素的影响，导航栏的实际高度可能会有所差异。因此，在实际项目中推荐通过动态获取状态栏高度来适配导航栏的高度[^3]。 可以通过以下方式获取系统的状态栏高度： ```javascript export default { data() { return { statusBarHeight: 0, navBarHeight: 44, // 默认导航栏高度 (单位 px) }; }, onLoad() { const systemInfo = uni.getSystemInfoSync(); this.statusBarHeight = systemInfo.statusBarHeight; // 对于 iOS 和 Android 设备分别处理 if (systemInfo.platform === 'ios') { this.navBarHeight = 44; } else if (systemInfo.platform === 'android') { this.navBarHeight = 48; } console.log('总高度:', this.statusBarHeight + this.navBarHeight); } }; ``` 上述代码片段展示了如何根据不同平台调整导航栏的整体高度，并将其存储到组件的数据对象中以便后续使用。 --- #### 创建自定义导航栏组件 为了提高代码复用性和可维护性，可以将自定义导航栏封装成独立的 Vue 组件。以下是创建 `<navbar>` 组件的一个简单示例[^4]： ```vue <template> <view class="nav-bar"> <!-- 状态栏占位 --> <view :style="{ height: `${statusBarHeight}px`, backgroundColor: '#fff' }"></view> <!-- 导航栏主体 --> <view :style="{ height: `${navBarHeight}px`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', backgroundColor: '#fff' }"> <text v-if="isShowPre" @click="goBack">返回</text> <text>{{ navTitle }}</text> <text></text> <!-- 可扩展其他功能按钮 --> </view> </view> </template> <script> export default { props: { isShowPre: Boolean, // 是否显示返回按钮 navTitle: String // 导航栏标题 }, data() { return { statusBarHeight: 0, navBarHeight: 44 }; }, onLoad() { const systemInfo = uni.getSystemInfoSync(); this.statusBarHeight = systemInfo.statusBarHeight; if (systemInfo.platform === 'ios') { this.navBarHeight = 44; } else if (systemInfo.platform === 'android') { this.navBarHeight = 48; } }, methods: { goBack() { uni.navigateBack({ delta: 1 }); } } }; </script> <style scoped> .nav-bar { width: 100%; } </style> ``` 在此基础上，可以在任意页面引入并使用该组件： ```html <template> <view> <navbar :isShowPre="true" navTitle="活动页面"></navbar> <view style="margin-top: 90px;"> 页面内容... </view> </view> </template> <script> import navbar from '@/components/navbar.vue'; export default { components: { navbar } }; </script> ``` --- #### 总结 以上介绍了如何利用 UniApp 构建带自定义顶部导航栏的小程序，主要包括以下几个方面： - 修改 `manifest.json` 移除默认导航栏； - 使用 `getSystemInfoSync()` 方法动态获取状态栏高度以适配多机型； - 将导航栏逻辑抽象为独立组件供全局调用。 ---