uniapp自定义头部导航

### 创建自定义顶部导航栏 在 UniApp 中创建自定义顶部导航栏涉及多个方面，包括配置 `pages.json` 文件以及编写前端代码来处理界面逻辑。 #### 配置 pages.json 文件 为了使特定页面支持透明标题栏，在项目的 `pages.json` 文件中找到对应页面的路径，并在其样式属性下加入支付宝小程序特有的设置： ```json { "path": "yourPagePath", "style": { "mp-alipay": { "transparentTitle": "always", "titlePenetrate": "YES" } } } ``` 此段配置使得该页面能够拥有始终透明的效果并且允许内容穿透状态栏[^1]。 #### 计算胶囊按钮尺寸与定位 对于不同平台上的微信小程序而言，通常会有一个右上角的功能区（即所谓的“胶囊”）。要适配这个区域，则需调用 API 来取得其具体的位置信息以便调整自定义导航条的设计。通过 `uni.getMenuButtonBoundingClientRect()` 方法可以获得胶囊按钮的相关数据，进而动态设定自定义组件的高度和其他样式参数[^2]。 ```javascript export default { data() { return { menuHeight: 0, statusBarHeight: 0 }; }, onLoad() { const rect = uni.getMenuButtonBoundingClientRect(); this.menuHeight = rect.height; // 获取状态栏高度 #ifdef MP-WEIXIN || APP-PLUS wx.getSystemInfo({ success(res) { self.statusBarHeight = res.statusBarHeight; } }); #endif #ifndef MP-WEIXIN || APP-PLUS plus.navigator.getStatusbarHeight(function(height){ self.statusBarHeight = height; }) #endif } }; ``` 注意这里使用了条件编译语法 (`#ifdef`, `#endif`) 来区分不同的运行环境，因为某些函数可能只适用于特定的小程序端口或应用版本。 #### 构建自定义导航栏 HTML 结构 接下来是在 Vue 组件里构建实际显示给用户的 DOM 元素。这部分可以根据个人需求自由设计，下面给出一个简单的例子作为参考： ```html <template> <view class="custom-nav-bar"> <!-- 返回图标 --> <image @tap="handleBackClick" src="/static/back.png"></image> <!-- 页面标题 --> <text>{{ pageTitle }}</text> <!-- 胶囊占位符(如果需要的话) --> <view :style="{height: `${menuHeight}px`}"></view> </view> </template> <script> // ... 上述 JavaScript 代码 ... </script> <style scoped lang="scss"> .custom-nav-bar { display: flex; align-items: center; justify-content: space-between; padding-left: 20px; background-color: white; image { width: 24px; height: 24px; } text { font-size: 18px; color: black; } view:last-child { margin-right: calc((env(safe-area-inset-right) / 2)); } } </style> ``` 上述模板展示了如何利用 CSS Flexbox 布局技术排列各个子元素；同时考虑到安全边距问题加入了 `safe-area-inset-*` 变量以确保兼容带有圆角屏幕或其他特殊外形设备的情况。 #### 处理返回事件 最后一步就是重写默认的物理按键行为，当用户点击硬件返回键时触发指定操作而不是简单关闭当前窗口。这可以通过监听全局生命周期钩子中的 `onBackPress` 函数完成。在此处可根据实际情况决定是要跳转至其他 Tab 或者普通页面链接[^3]。 ```javascript methods: { handleBackClick() { onBackPress(e => { if (e.from === 'backbutton') { let urlToGo = '/pages/index'; // 替换成目标地址 // 判断是否为 tab 类型页面 try { const tabsList = getCurrentPages().filter(page => page.route.startsWith('pages/tab')); if(tabsList.length > 0 && !urlToGo.includes('/tab/')){ uni.switchTab({url:urlToGo}); }else{ uni.reLaunch({url:urlToGo}); } return true; // 表明已拦截并处理此次回退请求 } catch(error){console.error(error)} } }); } }, mounted(){ onBackPress(this.handleBackClick); } ``` 这段脚本实现了对返回动作更加灵活可控的支持，既可以在必要时候引导访问者前往首页或者其他重要节点，又不会影响正常的浏览体验流程。