微信小程序自定义导航栏（wx_custom_navigation_bar）

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3k累计阅读 3.1k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-09-23 20:07:35 发布 3k 阅读 AI 写同款· GEO 优化 ›

微信小程序 - 自定义头部导航栏开发默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌ 阅读详情

GitHub： https://github.com/fuyz/wx_custom_navigationStyle

可选择返回键、首页键，动态设置标题，响应式组件

文档 : 文档介绍

效果如下：

收录于

微信

当前文章被收录于：

微信

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#自定义导航 #home按钮 #返回键首页

微信小程序自定义导航栏 navigation bar 返回键首页微信自定义导航栏（wx_custom_navigation_bar）可选择返回键、首页键，动态设置标题，响应式组件版本号：1.0.0 作者：chen-yt 代码：https://github.com/chen-yt/wx_custom_navigation_bar 截图 ... 阅读详情

相关推荐

微信小程序动态导航栏颜色设置实战：从基础到进阶

本文详细介绍了微信小程序中动态设置导航栏颜色的实战技巧，从基础的wx.setNavigationBarColor API使用到进阶的动态颜色处理和生命周期管理。文章还提供了常见问题解决方案和项目最佳实践，帮助开发者实现个性化导航栏效果，特别适合需要动态设置navigationBarBackgroundColor的场景。

weixin_29223603的博客 456

小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar

1.在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏； 2.代码部分 2.1首先在app.json的window中配置"navigationStyle": "custom"（使用自定头部导航栏） 2.2导航栏组件部分（1）custom-component.wxml &lt...

hangGe0111的博客 5万+

微信小程序顶部导航栏刘海屏的横线问题

{ "pages": [ "pages/index/index" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#f2615b", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "b.

qq_23159841的博客 4015

实践分享：小程序自定义组件开发

介绍了什么是自定义组件后，再看看如何开发一个简单的自定义组件，步骤如下：

finogeeks的博客 876

uni-app微信小程序登录页导航栏小房子图标异常显示与隐藏方案

在微信小程序开发中，原生导航栏的默认行为与页面栈管理机制紧密相关。其核心原理在于微信客户端会根据页面栈深度与路径关系，自动判断是否在导航栏显示“返回首页”图标（小房子）。这一机制旨在提升用户体验，但在特定场景（如登录页、支付页等流程关键节点）下，其自动显示逻辑可能与业务需求冲突，破坏流程的封闭性与用户体验的一致性。从技术实现角度看，这涉及到框架封装层（如uni-app）对原生能力的覆盖粒度问题。对于需要精细化控制导航栏的工程实践，开发者通常需要掌握多种干预手段：既可通过原生配置项（如hideHomeButt

weixin_30918633的博客 447

UniApp微信小程序自定义TabBar实战：从原理到高级交互实现

在移动应用开发中，底部导航栏（TabBar）是核心的UI组件，负责应用主要功能模块的切换。其实现原理通常基于路由管理与视图渲染机制，通过维护一个状态索引来同步视觉焦点与页面内容。自定义TabBar的技术价值在于突破了原生组件在样式和交互上的限制，允许开发者完全掌控其视觉表现与动态行为，从而满足品牌统一、运营活动提示（如徽标）和提升用户体验（如交互动画）的深层次需求。这一能力在追求高度个性化与动态化的应用场景中尤为重要，例如电商、社交类小程序。本文聚焦于UniApp框架下的微信小程序开发，深入解析如何通过自定

weixin_30430169的博客 364

微信小程序实现原生导航栏和自定义头部导航栏

因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。

花铛 1万+

VESC电调高级调参指南：电机校准与性能优化实战解析

本文详细解析了VESC电调的高级调参方法，包括电机校准与性能优化实战技巧。从基础参数设置到高级机械参数优化，再到动态性能调优，提供了全面的调参指南。特别针对电机类型、功率设置、电池参数配置等关键环节给出实用建议，帮助用户充分发挥VESC电调的性能潜力。

weixin_30772105的博客 196

微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）

一片天空 1万+

【环境搭建】使用openSfM+MVSNet重建稠密点云

本帖详细介绍了如何使用openSfM+MVSNet对真实采集的数据进行稀疏重建与稠密重建，并针对一些真实场景下可能遇到的问题进行了整理。

YuhsiHu的博客 1971

若依前后端分离版集成nacos

服务动态配置与服务注册发现根据公司要求，需要将项目集成到nacos中，当前项目是基于若依前后端分离版开发的，若依的版本为3.8.3，若依框架中整合的springBoot版本为2.5.14。Nacos核心提供两个功能：服务注册与发现，动态配置管理。

NDF923的专栏 4645

Speaker Notes

[No speaking — wait for introduction] ## Slide 2: Motivation "Thank you. So let me start with the problem we're trying to solve..." [Time: 1.5 min] ## Slide 3: Problem Statement "Specifically, the c

gitblog_00363的博客 729

【Fluent】太阳辐射模型—Solar Ray Tracing

一、引言Fluent提供了一个太阳能负载模型，可用于计算进入计算域的太阳光线的辐射效应。该模型可以分为：太阳光线追踪和太阳辐照。其中太阳辐照需要使用DO或MC模型，直接向辐射模型提供外光束方向和强度参数。太阳光线追踪不限制辐射模型，可以独立于辐射方程使用，甚至可以在辐射模型off的情况下使用。本文主要介绍太阳光线追踪模型。该模型非常适用于以下领域汽车气候控制（ACC）应用建筑物中的人体热舒适建模应用该模型使用着色算法进行太阳光线追踪。光线会透过半透明的面加载在照射面上。

a5567899的博客 7588

Modin 0.15.0 版本发布解析：Logging、Batch Pipeline 与稳定性升级全景

Modin 0.15.0 是 Modin 在稳定性和可观测性方向上的一次关键迭代，本版本围绕"让分布式 Pandas 工作流更可靠、更可诊断"这一主题展开：正式引入 Modin Logging（API 调用跟踪 + RSS 内存剖析）、加入实验性的 Batch Pipeline API（行并行查询流水线）、为 `read_sql` 引入 connectorx 备选引擎，并修复了大量影响正确性的缺陷

gitblog_00171的博客 690

C#实战大华智能安防系统：从SDK封装到视频流与智能报警的全链路落地

本文将介绍C#集成大华SDK开发安防系统的实战经验，重点解决多路视频预览卡顿和报警延迟问题。文章通过三层架构设计（SDK封装层、业务服务层、应用层）实现解耦，详细分析线程安全封装、高效解码显示和智能事件联动等核心技术。针对16路摄像头同时预览时CPU占用率过高的问题，提出使用子码流拉流与异步解码的优化方案，并总结8个常见开发陷阱的解决方案。文中还提供了大华智能安防系统的完整架构图，展示从设备层到应用层的交互流程，特别强调业务服务层中视频流服务和智能报警服务的核心功能设计。

这里只有干货：从 Modbus 通信到 MES 对接，从 YOLO 训练到工控机部署，带你搞定工业软件开发全流程。 430

华为od 面试八股文_C语言_02_含答案

MISAYAONE的博客 2230

从0到1开发微信小程序导航栏：navigation-bar组件架构设计与实现

微信小程序自定义导航栏组件（navigation-bar）是实现小程序界面个性化的重要元素，能够完美适配全部手机机型，为用户提供一致的导航体验。本文将详细介绍如何从架构设计到实际实现，打造一个功能完善的微信小程序导航栏组件。 ## 组件核心架构设计 ### 组件目录结构解析 导航栏组件的核心代码集中在 `components/navBar/` 目录下，包含以下关键文件： - `navBar.

gitblog_00972的博客 438

YOLO26 FP16/INT8混合量化实战：精度无损+速度拉满，边缘设备部署最优解

这是混合量化的灵魂，告诉量化器：哪些层不准动，保留FP16。"""判断是否为量化敏感层 → 是则豁免为FP16返回 True=敏感层(FP16)，False=可量化(INT8)"""# 1. 检测头回归分支# 2. 小通道1×1卷积# 3. SiLU 激活# 4. 残差ShortcutYOLO26想要在Jetson、RK3588、昇腾、嵌入式NPU上真正落地，FP16/INT8混合量化是唯一最优解。它的核心逻辑不是玄学，而是工程上的精准取舍能量化的层，全部INT8榨性能；

专注于Python爬虫开发，分享爬虫技巧、项目实战与反爬经验，使用Scrapy、BeautifulSoup等工具，解决数据抓取难题。 746

微信小程序自定义导航栏全攻略：从原理到实战适配

在移动应用开发中，UI组件定制化是提升用户体验和品牌辨识度的关键环节。微信小程序的原生导航栏虽然开箱即用，但在面对沉浸式背景、复杂交互控件等个性化设计需求时，其灵活性就显得不足。自定义导航栏的核心原理在于通过配置`navigationStyle: custom`关闭原生组件，并利用`wx.getMenuButtonBoundingClientRect()`API精确获取系统胶囊按钮的几何信息，从而为自定义布局提供精准的坐标基准。这项技术的核心价值在于突破了原生UI的限制，允许开发者完全掌控顶部区域的视觉表现

weixin_30463341的博客 292

【LabVIEW面向对象编程01】简介

记得刚接触labview那会儿，领导让我在测试设备上写一个简单的日志记录程序，自己反反复复查阅资料才简单的写了一个实在是撇脚的程序，后来领导趁着工作之余给我大致讲解了几个函数的用法，然后简单的改了一下，程序就像突然有了灵魂一样，简单好用，从那时起就对labview产生了兴趣，一发不可收拾，那时经常一个人熬夜学习，现在已然没有那种动力了，哎，年轻就是好。接下来我们为学生类创建一个对象，新建一个VI，打开程序框图，直接将我们项目中的类拖到程序框图，它就成为一个实实在在的对象，我们将其命名为studentA。

weixin_43476034的博客 671

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

微信小程序自定义导航栏全攻略：从原理到封装组件

在移动应用开发中，导航栏是用户界面的核心交互区域，其设计与实现直接影响用户体验和品牌一致性。其原理在于通过系统API获取设备状态栏、安全区域及原生控件（如微信的胶囊按钮）的精确坐标与尺寸，从而计算出可自由绘制的布局空间。这项技术的核心价值在于赋予开发者对顶部区域的完全控制权，能够实现沉浸式视觉设计、集成复杂交互功能（如搜索框），并确保内容布局在各种屏幕形态下的精准适配。在微信小程序开发场景下，自定义导航栏已成为实现高级UI效果和提升产品质感的必备技能。开发者常需处理“微信小程序顶部导航栏高度”的动态计算，并

weixin_30363509的博客 463

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

微信小程序自定义导航栏实战：从原理到封装组件与安全区适配

在移动应用开发中，UI组件定制是提升产品品牌辨识度和用户体验的关键环节。其原理在于通过框架提供的API和样式系统，覆盖或重构原生组件，以实现特定的视觉与交互设计。这项技术的核心价值在于突破了平台默认样式的限制，为开发者提供了充分的创意实现空间，广泛应用于电商、社交、内容等需要强化品牌形象的场景。本文聚焦于微信小程序开发，深入解析如何通过动态获取状态栏与胶囊按钮信息、运用Flexbox进行精准布局，并封装为可复用的自定义组件，最终实现高度定制化的顶部导航栏。文中特别强调了安全区适配与胶囊按钮对齐等工程实践细节

weixin_30412167的博客 446

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

微信小程序自定义导航栏全攻略：从原理到实战避坑

在移动端开发中，组件化是提升代码复用性和维护性的核心思想。其原理在于将UI与逻辑封装成独立单元，通过属性与事件接口与外界通信。这一技术价值在于能显著降低复杂界面的开发成本，尤其适用于导航栏、弹窗等高频复用模块。在微信小程序开发场景下，自定义顶部导航栏是强品牌展示和个性化交互的常见需求，但涉及状态栏高度、胶囊按钮位置等动态计算，容易引发适配问题。本文基于组件化实践，详细解析了通过全局组件方案封装导航栏的核心公式与避坑指南，帮助开发者高效实现稳定、美观的自定义顶部导航，提升小程序整体体验。

weixin_30938149的博客 372

【微信小程序】自定义navigationBar标题栏

小程序默认使用的navigationBar只能设置颜色、文字，左侧返回按钮也是不可改变的，若要实现下方效果有解决方案，但是也有一定的问题。 1、更改app.json &amp;quot;window&amp;quot;: { &amp;quot;navigationStyle&amp;quot;: &amp;quot;custom&amp;quot; }, 2、自定义标题栏使用c

Maria028的博客 3万+

小程序（原生）

"自定义组件名称": "自定义组件的路径",

mengmoyong的博客 139

微信小程序自定义导航栏

微信小程序自定义导航栏 业务需求：点击小房子进行跳转指定的页面、更改小房子的样式、或者是自定义导航栏。2.自定义样式（可能会遇到ios/安卓版本样式兼容问题）1.原生的导航栏组件。

共同进步 4625

上一篇： Cocos Creator开发的游戏发布到微信小游戏平台，提示未找到入口 app.json 文件

下一篇： JS判断一个对象是否为空

微信小程序动态导航栏颜色设置实战：从基础到进阶

weixin_29223603的博客

03-22