分享一款兼容 WebView 与 Skyline 双渲染引擎的自定义返回导航组件。该组件实现了返回箭头、标题与胶囊按钮垂直中线的精准对齐，支持动态配置背景色、标题文字及颜色，采用组件化设计便于页面复用。默认行为为返回上一页，同时也预留了扩展接口以支持固定返回指定页面。
核心代码实现
WXML 结构
components/nav-back/nav-back.wxml
<view class="nav-back-wrap" style="height:{{navHeight}}px;background-color:{{bgColor}}"><view class="capsule-center-line" style="top:{{menuTop}}px;height:{{menuHeight}}px;"><!-- 返回按钮：左侧固定，垂直居中对齐胶囊中线 --><view class="back-btn" bindtap="handleBack"><image class="back-icon" src="/static/icons/back.png" mode="aspectFit"></image></view><!-- 标题：整屏居中 --><view class="back-title" style="color:{{titleColor}}">{{title}}</view></view></view><!-- 占位，防止页面内容被导航遮挡 --><view style="height:{{navHeight}}px;"></view>
WXSS 样式
components/nav-back/nav-back.wxss
.nav-back-wrap {width: 100%;position: fixed;top: 0;left: 0;z-index: 999;}.capsule-center-line {position: absolute;left: 0;right: 0;display: flex;align-items: center;}.back-btn {position: absolute;left: 24rpx;display: flex;align-items: center;z-index: 2;}.back-icon {width: 48rpx;height: 48rpx;}.back-title {position: absolute;left: 50%;transform: translateX(-50%);font-size: 34rpx;font-weight: 500;white-space: nowrap;max-width: 60%;overflow: hidden;text-overflow: ellipsis;}
JS 逻辑
components/nav-back/nav-back.js
Component({properties: {title: {type: String,value: ''},bgColor: {type: String,value: '#ffffff'},titleColor: {type: String,value: '#333333'}},data: {navHeight: 0,menuTop: 0,menuHeight: 0},lifetimes: {attached() {this.calcNavInfo()}},methods: {calcNavInfo() {const menu = wx.getMenuButtonBoundingClientRect()const systemInfo = wx.getSystemInfoSync()const statusBarHeight = systemInfo.statusBarHeightconst navHeight = menu.bottom// 核心：capsule-center-line 的top = 胶囊距离顶部的位置，放在状态栏下面，和胶囊对齐const menuTop = menu.topthis.setData({navHeight,menuTop,menuHeight: menu.height})console.log('胶囊信息：', menu)},handleBack() {wx.navigateBack({delta: 1})}}})
JSON 配置
components/nav-back/nav-back.json
{"component": true}
页面调用指南
在页面的 JSON 配置文件中引入组件，并将 navigationStyle 设置为 custom 以关闭原生导航栏。
{"navigationStyle": "custom","usingComponents": {"nav-back": "/components/nav-back/nav-back"}}
WXML 调用示例：
<!-- 默认白底，黑色文字 --><nav-back title="用户中心"></nav-back><!-- 自定义背景色、文字颜色 --><nav-back title="详情页" bgColor="#f7f8fa" titleColor="#222"></nav-back>
开发注意事项
1. 导航栏高度计算
menu.bottom 表示胶囊底部距离屏幕顶部的距离，这即为自定义导航栏所需的总高度（包含状态栏和胶囊区域）。
2. 双引擎兼容性处理
WebView 和 Skyline 渲染引擎对胶囊坐标的定义存在差异：
- Skyline：menu.top 是相对于屏幕顶部的绝对位置，无需额外处理。
- WebView：menu.top 是相对于状态栏下方的相对位置，计算时需考虑状态栏高度。
建议在代码中通过 renderer 自动判断适配，避免维护两套独立组件。
3. 标题居中与溢出处理
采用 left: 50% 配合 transform: translateX(-50%) 实现真正的屏幕水平居中，避免受左侧返回按钮宽度的影响。同时设置 max-width 并开启文字省略（text-overflow: ellipsis），防止标题过长时与右侧胶囊按钮发生重叠。
#自定义导航