企业官网建设流程全解析

先讲一句实在话：微信小程序自定义顶部导航这个事，看着只是改一行navigationStyle: "custom"，真正做起来却要和状态栏高度、胶囊按钮坐标、滚动渐变、不同机型适配打交道。很多人照着网上的片段改了配置，一上真机标题要么偏上偏下，要么被刘海屏挡住，问题出在只抄了布局，没理解布局背后的计算逻辑。这篇文章我会从一个组件化的方式入手，把自定义顶部导航从原理到落地的完整链路拆开讲，包括代码可以直接抄的组件实现、滚动渐变的处理方案、以及真机调试时最容易踩的坑。适合刚接触小程序、想把首页做得更有设计感的人，也适合已经写过几页小程序但导航一直做不顺手的人参考。

1. 先想清楚：默认导航栏为什么不够用

1.1 默认导航栏的几个硬限制

微信小程序自带的顶部导航栏，正常情况下表现是固定的：标题居中、背景纯色、返回按钮用系统样式、右侧胶囊按钮永远保留。这些限制本身不是问题，问题在于产品设计一旦需要视觉差异化，默认导航栏很快就撑不住了。

首先是背景颜色。默认导航栏只能设置一个比较简单的纯色背景，不能做透明、不能放渐变、更不可能让顶部图片通顶铺到状态栏下面。很多消费类小程序首页都需要“沉浸式头图”效果，头图一上来就顶到屏幕最上方，导航栏悬浮在图片上，这种效果默认导航栏完全没法实现。

其次是标题的布局。默认导航栏标题只能居中，字号字重都是系统定死的。标题左对齐、标题旁边加图标、右侧放一个搜索按钮或分享按钮，这些需求默认导航栏都满足不了。你可以用navigationBarTitleText设置文字，但也仅此而已。

还有一点很少被提到：默认导航栏的存在会压缩页面可视高度，在刘海屏上尤其明显。一旦你决定采用自定义导航，整个页面的头部空间都由自己控制，视觉上会自由很多，但同时也意味着所有原本系统帮你做好的事，现在都得自己做。

所以我一般建议，不要把所有页面都改成自定义导航，而是先判断页面是否需要沉浸式头图、是否需要对标题进行视觉定制。不需要的页面保留默认导航栏反而省事，需要的页面才走自定义方案。

1.2 自定义导航的典型使用场景

我实际做过和见过比较多的场景大概是这几类：

• 首页带轮播图或大图，希望图片通顶，导航栏一开始透明，滚动后才变成白色；
• 详情页需要左侧返回箭头、中间标题，右侧自定义按钮，比如“分享”或“收藏”；
• 品牌官网类小程序，顶部导航有品牌色渐变，文字有特殊字体要求；
• 商城小程序，导航栏右侧要放一个购物车图标，点击跳转购物车页面。

上面这些需求，如果硬用默认导航栏，实现方式会非常别扭。比如你想在导航栏右侧加按钮，默认导航栏根本不让放，最后只能做一个假的占位层，或者干脆放弃这个设计。自定义顶部导航组件化之后，这些需求就变成了普通的 WXML 布局问题，想放什么按钮都行。

不过需要提前说明，自定义导航并不是把整个页面头部重做一遍，而是要保留微信的胶囊按钮（右上角那个胶囊形状的菜单按钮），我们自定义的区域是胶囊按钮左侧以及状态栏背景这一段。这一点是所有自定义导航实现的前提。

2. 自定义导航的两块地基：状态栏高度与胶囊按钮坐标

2.1 一切从 navigationStyle: custom 开始

要开启自定义导航，需要在页面的 json 配置里这样写：

{ "navigationStyle": "custom", "usingComponents": { "custom-nav": "/components/custom-nav/index" } }

配置了navigationStyle: custom之后，系统自带的导航栏就不渲染了，页面的顶部区域完全交给 WXML 控制。此时页面内容会默认延伸进状态栏区域，也就是会顶到屏幕最上方。如果你不做任何处理，页面标题、状态栏时间电量这些系统元素会叠在一起，视觉非常乱。

从这一刻起，你必须要知道两个关键数据：状态栏高度和胶囊按钮的位置。这两个数据直接决定了自定义导航到底该画多高、内容该从哪儿开始排。

2.2 获取状态栏高度的正确姿势

状态栏高度就是手机顶部显示时间、电量、信号那一栏的高度。不同机型数值不一样，老的安卓机可能只有 20 像素，iPhone 15 Pro 这种带灵动岛的机型可能会到 50 多。自定义导航时，我们必须把这个高度作为导航栏的一部分，否则导航内容会被状态栏文字盖住。

获取状态栏高度的标准做法是：

function getWindowInfo() { return wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync(); } const windowInfo = getWindowInfo(); const statusBarHeight = windowInfo.statusBarHeight || 20;

注意我这里做了一个兼容判断：基础库比较新的版本优先用wx.getWindowInfo，老版本退回wx.getSystemInfoSync。虽然现在大部分项目基础库版本不低，但写组件的时候保留兼容判断会更稳妥。

2.3 胶囊按钮信息是自定义导航的定位锚点

状态栏高度解决了“上方安全区域”的问题，但导航栏本身该有多高，光靠状态栏高度不够。因为微信的胶囊按钮在系统导航栏里是垂直居中的，胶囊按钮的位置实际上间接给出了系统导航栏的高度信息。

这里要用到另一个 API：

const menuButton = wx.getMenuButtonBoundingClientRect();

返回的数据里包含top、bottom、height、width。其中top是胶囊按钮上边缘相对屏幕顶部的距离。我们自己定义的导航栏，高度要尽量和系统默认导航栏一致，视觉上才不别扭。业界通用的计算公式是：

const menuTop = menuButton.top; const menuHeight = menuButton.height; const navBarHeight = (menuTop - statusBarHeight) * 2 + menuHeight; const totalNavHeight = statusBarHeight + navBarHeight;

为什么这么算？因为胶囊按钮在系统导航栏中垂直居中。胶囊按钮的上边缘到状态栏下边缘的距离，理论上等于胶囊按钮下边缘到导航栏下边缘的距离。用menuTop - statusBarHeight算出上半段间距，乘以 2 就等于按钮上下的总间距，再加上胶囊按钮自身高度，就是导航栏的净高度。最后加上状态栏高度，得到整个自定义导航区域的总高度。

这个公式基本可以通吃所有机型。尤其是苹果的灵动岛机型，statusBarHeight会明显变大，胶囊按钮的top也会相应下移，两个数值的变化会同时被公式吸收，最终导航栏高度依然合理。

拿到totalNavHeight之后，页面顶部就需要预留这么大一段高度的空白区域，否则页面内容会钻进状态栏里。通常做法是放一个高度等于totalNavHeight的占位节点，或者干脆让自定义导航组件本身承担占位作用，这一点我在下一节展开讲。

3. 组件化实现一套可复用的自定义导航

3.1 为什么拆成组件而不是每页写一遍

自定义导航不是只在一个页面用，首页、详情页、列表页很可能都要用。如果每个页面复制一段导航代码，后续调整颜色、改标题样式时就要一个一个页面去改，很容易漏。拆成组件之后，我们只需要维护一个文件，各页面通过属性传入标题、背景色、返回按钮开关等参数，这是我认为最合理的方案。

组件目录结构我建议这样组织：

components/ custom-nav/ index.js index.json index.wxml index.wxss

然后在需要使用导航的页面 json 里注册组件：

{ "usingComponents": { "custom-nav": "/components/custom-nav/index" } }

如果项目里大多数页面都要用，也可以在app.json的usingComponents里全局注册，省得每个页面单独引。全局注册的唯一顾虑是组件会跟随所有页面加载，但只要组件本身逻辑不重，影响可以接受。

3.2 组件的属性设计

组件需要对外暴露哪些配置能力，决定了这个组件好不好复用。我做了几个比较常用的属性，你可以根据自己的项目再扩展。

Component({ properties: { title: { type: String, value: '' }, bgColor: { type: String, value: '#ffffff' }, color: { type: String, value: '#191919' }, showBack: { type: Boolean, value: false }, placeholder: { type: Boolean, value: true } }, data: { statusBarHeight: 20, navBarHeight: 44, totalNavHeight: 64 }, lifetimes: { attached() { this.calcNavInfo(); } }, methods: { calcNavInfo() { const windowInfo = wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync(); const menuButton = wx.getMenuButtonBoundingClientRect(); const statusBarHeight = windowInfo.statusBarHeight || 20; const navBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height; this.setData({ statusBarHeight, navBarHeight, totalNavHeight: statusBarHeight + navBarHeight }); }, handleBack() { const pages = getCurrentPages(); if (pages.length > 1) { wx.navigateBack(); } else { wx.reLaunch({ url: '/pages/index/index' }); } } } });

这里解释一下内部的totalNavHeight。我在组件里同时承担了“占位”的职责，这样页面不用再去手动算高度。组件结构是：外层根节点高度等于totalNavHeight，用来占位；内层导航栏position: fixed固定在视口顶部。也就是说组件本身渲染出来是一块和系统导航栏高度一致的透明区域，底层真正浮在最上面的才是导航栏背景和内容。

<view class="custom-nav" style="height: {{totalNavHeight}}px;"> <view class="custom-nav__bar" style=" padding-top: {{statusBarHeight}}px; height: {{totalNavHeight}}px; background-color: {{bgColor}}; color: {{color}}; " > <view class="custom-nav__left" wx:if="{{showBack}}" bindtap="handleBack"> <image class="custom-nav__back-icon" src="/assets/icon-back.png" mode="aspectFit" /> </view> <view class="custom-nav__title">{{title}}</view> <view class="custom-nav__right"> <slot name="right"></slot> </view> </view> </view>

外层占位节点的背景建议保持透明，它只是为了防止页面内容被 fixed 导航遮住。内层导航栏的padding-top等于状态栏高度，这样标题、返回按钮、右侧插槽都安全落在状态栏之下。

样式部分要注意几个细节，给一个基础版本：

.custom-nav { width: 100%; background: transparent; } .custom-nav__bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .custom-nav__left { position: absolute; left: 16rpx; bottom: 0; display: flex; align-items: center; height: 100%; padding-left: 16rpx; box-sizing: border-box; } .custom-nav__back-icon { width: 40rpx; height: 40rpx; } .custom-nav__title { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 32rpx; font-weight: 500; } .custom-nav__right { position: absolute; right: 16rpx; display: flex; align-items: center; height: 100%; padding-right: 16rpx; box-sizing: border-box; }

标题默认居中，左边和右边的按钮都用绝对定位挂在两侧。右侧我留了一个slot，这样页面可以传入自定义内容，比如搜索按钮、分享按钮、购物车图标。左侧也可通过showBack控制是否显示返回按钮。

使用的时候，页面 WXML 里这样写：

<custom-nav title="首页" bgColor="#ff6a00" color="#ffffff" showBack="{{false}}" />

如果你的返回图标设计比较特殊，也可以进一步把左侧也改造为插槽。我的做法是先用showBack控制默认返回行为，特殊页面再通过slot完全自定义左侧区域。

3.3 页面接入时最容易犯的一个错

接入组件的时候，最容易犯的错是页面根节点的背景色没设对。自定义导航开启后，顶部状态栏那块区域的背景是由页面根节点或导航组件背景决定的。如果你页面根节点默认是#fff，而导航组件设了透明背景，顶部就会露出一块白色，和你的设计稿对不上。

解决办法是把页面根节点背景色和导航背景统一起来，或者让外面套一个根容器，背景色从顶部一直铺到底部。比如：

<view class="page" style="background-color: #f5f5f5;"> <custom-nav title="首页" bgColor="#ffffff" color="#191919" /> <!-- 页面内容 --> </view>

这种情况在页面开启下拉刷新时更明显。自定义导航页面的下拉刷新窗口结构会和顶部状态栏区域重叠，如果背景色不一致，会出现刷新动画区域和导航背景“两块颜色”的割裂感，看起来非常奇怪。

4. 让导航栏动起来：滚动渐变与返回逻辑

4.1 透明导航栏的滚动渐变原理

很多首页设计是导航栏一开始透明，头图完整露出，用户向下滚动后导航栏逐渐变成白色，标题和按钮也同步从白色变为深色。要实现这种效果，需要用到页面的滚动事件。

页面中监听滚动有两种常见方式。如果页面整体用的是页面滚动，就在页面的onPageScroll里处理；如果页面内部用了scroll-view，那要监听scroll-view的bind:scroll事件。这里先讲页面滚动的方式。

Page({ data: { scrollTop: 0 }, onPageScroll(e) { this.setData({ scrollTop: e.scrollTop }); const nav = this.selectComponent('#nav'); if (nav) { nav.updateScroll(e.scrollTop); } } });

组件这边新增一个updateScroll方法，根据滚动距离计算透明度和文字颜色：

methods: { updateScroll(scrollTop) { const threshold = 80; const progress = Math.min(scrollTop / threshold, 1); const bgAlpha = progress.toFixed(2); this.setData({ barBg: `rgba(255, 255, 255, ${bgAlpha})`, barColor: progress > 0.5 ? '#191919' : '#ffffff', barShadow: progress > 0.8 }); } }

threshold的含义是：滚动到多少像素时，导航栏完全变为不透明。80 像素是我常用的值，具体根据你的头图高度调整。头图越高，threshold可以设得越大，渐变过程就越平缓。

这里有一个细节：不要直接在onPageScroll里频繁setData，因为滚动事件触发频率很高，如果每次都更新组件数据，性能会有明显问题。较好的做法是在组件内部加一个简单的节流，比如：

updateScroll(scrollTop) { const threshold = this.data.threshold || 80; const progress = Math.min(scrollTop / threshold, 1); if (Math.abs(progress - this.data.progress) < 0.02) { return; } this.setData({ progress, barBg: `rgba(255, 255, 255, ${progress.toFixed(2)})`, barColor: progress > 0.5 ? '#191919' : '#ffffff' }); }

差值小于 0.02 就不触发setData，这能减少大量无意义的视图更新。实际体验中，肉眼几乎察觉不到这种近似的延迟。

模板和样式再调整一下，把动态背景色和颜色绑定到导航栏上：

<view class="custom-nav__bar" style=" padding-top: {{statusBarHeight}}px; height: {{totalNavHeight}}px; background-color: {{barBg || bgColor}}; color: {{barColor || color}}; box-shadow: {{barShadow ? '0 2rpx 12rpx rgba(0,0,0,0.06)' : 'none'}}; " >

4.2 返回按钮和页面栈的关系

自定义导航的返回按钮不能简单写死成wx.navigateBack。因为有些页面用户不是通过正常跳转进来的，可能是分享链接直接打开，此时页面栈里只有一层，navigateBack会没有任何效果。

我在组件的handleBack里做了兜底判断：

handleBack() { const pages = getCurrentPages(); if (pages.length > 1) { wx.navigateBack(); } else { wx.reLaunch({ url: '/pages/index/index' }); } }

如果当前页面栈大于 1，说明有上一页，正常返回；如果只有当前一页，说明用户是外部进来的，此时跳回首页更合理。这个地方也可以根据业务改成wx.switchTab，如果你的首页是 tab 页面的话。

4.3 右侧插槽的使用方式

右侧插槽是我觉得自定义导航组件最实用的部分。比如首页导航右侧要放一个搜索图标，页面里可以这样写：

<custom-nav title="商城" showBack="{{false}}"> <view slot="right" class="nav-search" bindtap="onSearchTap"> <image src="/assets/icon-search.png" /> </view> </custom-nav>

需要注意插槽内容的高度。我给的样式里.custom-nav__right是绝对定位，并且height: 100%，但插槽本身不会自动垂直居中。如果插槽里是一个图片按钮，建议给图片设置一个固定宽高，比如width: 40rpx; height: 40rpx;，配合父容器的align-items: center实现垂直居中。

这里再补一个提醒：组件里用了slot，要确保组件的index.json里开启了多插槽支持，如果你的页面是微信小程序基础库版本偏老，需要在Component中声明options: { multipleSlots: true }。我用一个插槽时没有开多插槽，如果你的右侧插槽之外还希望左侧也能插自定义内容，就一定要在options里开启。

5. 真机适配与踩坑记录

5.1 不同机型的数值差异

自定义导航的数值在开发者工具里看，和真机上会有细微差异，尤其是“胶囊按钮坐标”在不同机型和不同微信版本下不一定完全一致。开发者工具只能模拟一部分逻辑，最终要以真机预览为准。

安卓和 iOS 的差异主要体现在两点：

• 安卓机型状态栏高度普遍在 20~30 像素之间，导航栏净高度约 44~48 像素；
• iOS 刘海屏状态栏高度普遍在 44~54 像素之间，胶囊按钮的top也会更大；
• iOS 灵动岛机型状态栏高度比老刘海屏更大，胶囊按钮位置更靠下。

这些差异都不需要特殊处理，因为我们用的是公式动态计算，而不是写死 44 或 64。只要statusBarHeight和menuButton数据正确，最终算出来的totalNavHeight就是对的。怕的是有人图省事，直接写padding-top: 50px，换一台手机立刻出问题。

5.2 WebView、地图等原生组件的遮挡问题

自定义导航是fixed定位的，理论上z-index设得足够高就能盖住页面内容。但早期小程序里web-view、video、map这类原生组件的层级是独立于普通组件之上的，有时候导航栏会被原生组件盖住，导致返回按钮点不到。

现在新版基础库上原生组件和普通组件的同层渲染已经很成熟，这个问题逐渐少了，但依然不建议把导航栏的z-index设置得太随意。我的习惯是给导航栏预留 9999 的层级，并且页面里有web-view时，想办法把导航栏组件放到页面的顶层结构，避免被复杂容器嵌套影响。

如果你遇到返回按钮被盖住，先检查这个页面是否包含了原生组件，然后试着把自定义导航从原生组件所在的容器节点中提出来。绝大多数情况提出来就能解决。

5.3 下拉刷新、PC 端和屏幕旋转的边界情况

自定义导航页面开启下拉刷新时，下拉刷新的动画区域会出现在胶囊按钮附近。这个区域的位置和样式是微信决定的，我们改不了。我们能做的就是把导航栏背景做成纯色或不透明，避免下拉窗口和透明导航混在一起产生视觉重叠。

PC 端微信小程序在开发调试时，wx.getMenuButtonBoundingClientRect()的返回值可能和手机真机不一致，比如某些 PC 环境下菜单按钮宽度和位置会有偏差。做 PC 适配时，不要过分依赖计算出来的数值去做像素级设计，功能正常即可。最终发布前，必须以手机真机为准。

屏幕旋转的情况比较冷门，但小程序支持横屏时，状态栏高度和菜单按钮位置都会跟随变化。如果你的页面允许横屏，需要在组件里监听屏幕旋转事件或重新计算页面窗口信息，否则旋转后导航栏高度可能不正确。我的建议是：非必要不开横屏，开横屏就要做好重新计算的准备。

5.4 一个容易被忽略的字体缩放问题

微信小程序支持用户调整微信字体大小。本来这是好事，但放到自定义导航里会出现一个现象：用户把字体调大后，导航栏标题文字可能超出容器，甚至把右侧按钮挤出屏幕。

应对方法是在标题样式中加上max-width和省略号逻辑，这部分我在样式示例中已经写了。更彻底的做法是固定导航栏标题字号，不随系统字体缩放。小程序里可以对标题文字单独设置固定px字号来规避字体放大带来的布局问题，不过视觉效果需要自己权衡，这里提供一个方向，具体是否固定字号要看产品需求。

6. 效果图对照与完整案例演示

6.1 默认导航与自定义导航的视觉差异

文章标题说了附带效果图，这里我用文字把两种状态的关键差异列出来，方便你在自己的项目里对照检查实现效果。

这张表可以作为需求沟通时的检查清单：如果你希望页面呈现上面右列的任意一种效果，基本都需要自定义导航。

6.2 完整案例：一个资讯类首页的导航改造

以我之前做的一个资讯类小程序首页为例，说明具体改造过程。这个首页顶部是一张 640 像素高的大图，产品要求进入页面时导航栏完全透明，白色标题浮在图上，等用户向下滚动超过 80 像素后，导航栏逐渐变成白色，标题变成深色，同时底部出现一条淡淡的阴影。

第一步，页面 json 设置：

{ "navigationStyle": "custom", "enablePullDownRefresh": false, "usingComponents": { "custom-nav": "/components/custom-nav/index" } }

第二步，页面 WXML 结构：

<view class="page-root"> <custom-nav id="nav" title="资讯" bgColor="#ffffff" color="#191919" showBack="{{false}}" /> <view class="hero-image"></view> <view class="content-list"> ... </view> </view>

第三步，页面 JS 里监听滚动：

Page({ onPageScroll(e) { const nav = this.selectComponent('#nav'); if (nav) { nav.updateScroll(e.scrollTop); } } });

最终实现的效果是：页面初次进入时，导航栏区域完全透明，白色标题叠在大图上；向下滚动过程中，白色背景的透明度逐渐增加；滚动超过 80 像素后，导航栏完全变为白色，标题切换成深色，右侧胶囊按钮一直保持微信默认样式。整个过程在真机上测试，滑动流畅，没有出现明显掉帧。

6.3 效果图：三种典型状态的视觉描述

这里再给三个典型的“截图感”描述，你完成实现后可以对照检查：

第一帧，页面顶部是头图，头图一直延伸到屏幕最顶端，期间状态栏时间电量等内容清晰可见。导航栏背景完全透明，白色标题浮在图片上，左侧没有返回按钮，右侧只有一个微信胶囊按钮。

第二帧，页面向下滚动到中间状态，头图已经滚出屏幕一半，导航栏背景变成半透明的白色，标题颜色从白色向深色过渡，胶囊按钮没有任何变化。

第三帧，页面继续滚动到内容区，导航栏完全变成白色，标题变成深色，导航栏底部出现一条极淡的阴影，把操作区和下方内容区分开。

如果你看到的和我描述的不一样，大概率是某个状态的颜色值没设对，或者滚动阈值设得太小/太大。

6.4 让组件支持多页面差异化配置

案例首页实现后，我在详情页也复用了同一个组件。详情页的需求和首页完全不同：左侧要返回箭头，标题左对齐，右侧要放一个分享按钮。

页面里这样写：

<custom-nav title="文章详情" bgColor="#ffffff" color="#191919" showBack="{{true}}" > <view slot="right" class="detail-share" bindtap="onShareTap"> <image src="/assets/icon-share.png" /> </view> </custom-nav>

同一个组件，通过不同属性组合出完全不同的外观，这就是组件化的价值。如果你后续要做深色导航，加一个bgColor为深色的属性组合就行，组件内部逻辑不用再动。

真机调试时，一个小技巧是打印组件的totalNavHeight，在开发者工具的 console 里直接看当前机型算出来的值是否合理。iPhone 上正常应该接近 80，安卓上接近 64 到 70。看到明显反常的数字，优先查wx.getMenuButtonBoundingClientRect()是不是返回了空数据。

自定义顶部导航做到这个程度，已经覆盖了大多数业务场景。如果后续你还要做更复杂的沉浸式交互，比如导航栏随滚动改变高度、自定义导航里放搜索框联动、或者左侧做抽屉导航，都可以在这个组件的基础上继续扩展。核心思路不变：状态栏高度做基础安全区，胶囊按钮坐标做定位锚点，组件属性做差异化配置，页面滚动事件驱动视觉变化。把这四件事想明白了，自定义导航就不会再成为开发中的难题。