Uni-app导航栏适配终极避坑指南

既然昨天我们聊完了性能优化的"内功"，今天咱们就来聊聊"门面功夫"------导航栏（Navigation Bar）的适配与自定义。

在 Uni-app 开发中，导航栏是最容易让新手抓狂的地方：要么是刘海屏遮住了文字，要么是小程序胶囊按钮撞上了搜索框。

---

🚀 今日份：原生 vs 自定义，导航栏的"避坑指南"

1. 为什么推荐尽量使用"原生导航栏"？

很多初学者为了追求好看，第一件事就是把 navigationStyle 设为 custom。但原生导航栏其实有不可替代的优势：

• 性能极高：原生渲染，不随页面滚动卡顿。
• 配置简单 ：在 pages.json 里几行配置就能实现标题、背景色、甚至简单的按钮。
• 自动适配：它会自动处理所有手机的刘海、挖孔屏。

---

2. 必须自定义时，如何完美适配"异形屏"？

当你需要做透明渐变背景 、顶部搜索框 或异形布局时，必须开启自定义导航：

第一步：全局或局部开启

// pages.json
{
    "path": "pages/index/index",
    "style": {
        "navigationStyle": "custom" // 隐藏原生导航
    }
}

第二步：解决"刘海屏"占位问题（核心要点）

开启自定义后，状态栏（电池、时间处）会直接盖在你的内容上。你需要通过变量动态获取高度。

实战代码：

<template>
    <view>
        <view :style="{ height: statusBarHeight + 'px' }"></view>
        
        <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
            <view class="search-box">搜索商品...</view>
            </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBarHeight: 0,
            navBarHeight: 44 // 默认高度
        }
    },
    onLoad() {
        // 获取系统信息
        const sysInfo = uni.getSystemInfoSync();
        this.statusBarHeight = sysInfo.statusBarHeight;
        
        // #ifdef MP-WEIXIN
        // 小程序特有：获取胶囊按钮位置
        const menuButton = uni.getMenuButtonBoundingClientRect();
        // 计算导航栏高度 = (胶囊底部 - 状态栏高度) + (胶囊顶部 - 状态栏高度)
        this.navBarHeight = (menuButton.top - sysInfo.statusBarHeight) * 2 + menuButton.height;
        // #endif
    }
}
</script>

---

3. 如何实现"滑动渐变"效果？

如果你想在 App 或 H5 端实现随着页面滚动，导航栏从透明变白色的效果：

• App端（推荐） ：使用 pages.json 的 titleNView 配置 type: "transparent"，这是原生实现的，极其流畅。
• 通用方案 ：监听 onPageScroll，根据 scrollTop 动态修改自定义导航栏的 background-alpha。

---

⚠️ 经验小结：适配"潜规则"

1. 小程序胶囊 ：微信小程序的右侧胶囊是无法隐藏或移动的。你的自定义搜索框必须靠左，且右侧留出足够的安全距离，否则会重叠。
2. 字体大小：原生导航栏标题通常是 17px 或 18px，自定义时保持一致能让用户感觉更系统化。
3. 返回键 ：自定义导航栏需要你自己手写 uni.navigateBack() 逻辑。

---

💡 核心总结

• 简单需求：坚持用原生，改改背景色和文字就行。
• 复杂 UI ：开启 custom，但务必通过 uni.getSystemInfoSync() 获取 statusBarHeight 进行头部占位。
• 小程序适配 ：必须考虑 getMenuButtonBoundingClientRect()，否则必定撞车。

---