uniapp开发微信小程序--自定义顶部导航栏

设置自定义导航栏，并带返回按钮

UniApp开发微信小程序时，可通过自定义导航栏实现左侧按钮的样式和功能定制。关键步骤如下： 在pages.json中设置"navigationStyle": "custom"隐藏原生导航栏 使用uni.getSystemInfoSync()获取状态栏高度 通过uni.getMenuButtonBoundingClientRect()获取右侧胶囊按钮位置信息 动态计算导航栏高度，确保与原生导航栏一致 使用绝对定位实现左侧自定义按钮，使其与胶囊按钮高度对齐 页面内容需设置上边距避免被导航栏覆盖

uni-app 小程序自定义导航栏

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

当前为默认导入子组件（配置项参数为进行任何更改）状态，默认使用背景色#9CF，可自行根据业务需求更改背景色或渐变背景色。

上面的导航栏主要由状态栏（就是手机电量显示栏）和小程序的导航栏组成，android手机一般为48px，ios手机一般为44px。1、设置navigationStyle:custom。3、获取statusBarHeight高度。4、获取navTitleHeight的高度。2、页面导航栏div。

当我们在JSON中将navigationStyle设置成custom后，当前页面的顶部导航栏就需要我们制作了，但出现了一下几个问题：导航栏的高度该是多少？导航栏被刘海、信号图标给覆盖了，就像下图因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。

uniapp自定义顶部导航栏：自定义左侧图标 1:tabbar页面;2:扫码、分享打开的内页;3:点击跳转进入的内页

uniapp的顶部导航栏有时候不符合设计需求，我们可以自定义顶部导航栏。uniapp顶部自定义导航栏组件使用vue3，适用微信小程序和APP。

文章目录1. 实现效果2. App.vue3. pages.json 配置自定义4. 顶部导航栏 使用 微信小程序自定义 navigationBar 顶部导航栏，兼容适配所有机型 1. 实现效果 2. App.vue 在App.vue 中，设置获取的 StatusBar，CustomBar 高度（实现适配高度写法） uni.getSystemInfo 获取可视区域的高度 wx.getMenuButtonBoundingClientRect() 胶囊按钮位置信息 <script> im

我们在开发小程序时，自带的头部导航样式往往不能满足需求，故只能自定义导航，接下来简要介绍下如何实现： 1.去除自带的头部导航 要想自定义头部导航，首先要到pages.json文件夹中，找到对应页面，然后在style中写上代码： // 找到对应页面，在style中写下所需代码 { "path": "pages/about/apply", "style": { "navigationStyle": "custom" // 注意一定要书写此行代码 } } 2.封装自定

在小程序开发中，默认底部导航栏很难满足实际需求，好在官方给出了自定义形式，效果如下： 话不多说，直接上代码 1.组件 custom-tarbar.vue文件 <template> <view class="tarbar"> <view class=".tarbar-list" ...