微信小程序自定义顶部导航栏

小程序提供的顶部导航栏字体颜色仅支持 #ffffff 和 #000000两种，因其局限性多数情况需要自定义导航栏
导航栏替换基本流程如下

去掉原有小程序自带的导航栏；
计算导航栏高度。避免部分页面使用自带导航栏导致高度不一致的情况；
确定标题文字位置。

去掉顶部这个不太好看的黑壳壳子；

情况一：个别页面自定义
在当前页面所属的json配置文件中修改如下：

{"usingComponents": {},"navigationStyle": "custom"
}

情况二：全部页面自定义
在全局json配置文件(app.json)中修改windows参数如下(没有windows配置的手动添加)：

"window": {"navigationStyle": "custom"
},

此时效果：

获取状态栏高度

注：获取的高度单位是px

wx.getSystemInfo({success: res => {const statusBarHeight = res.statusBarHeight}
})

状态栏高度即为图中骚粉色区域高度；

导航栏高度

骚粉区域的高度再加上xie红色区域的高度就是我们自定义的导航栏高度

所有的机型导航栏高度都是状态栏高度加上44px

 const navigationHeight = statusBarHeight + 44 + 'px';

此时我们就找到了导航栏的高度

确定标题位置

标题和右上角的胶囊处于同一水平区域居中显示，如图黄色区域：

首先获取胶囊的位置信息（获取结果单位为px）

 const capsuleInfo = wx.getMenuButtonBoundingClientRect();//bottom: 胶囊底部距离屏幕顶部的距离//height: 胶囊高度//left:   胶囊左侧距离屏幕左侧的距离//right:  胶囊右侧距离屏幕左侧的距离//top:    胶囊顶部距离屏幕顶部的距离//width:  胶囊宽度

我们只需要拿到胶囊的height值和top值即可完成标题文字定位

  <view class="title" style="height:{{height}}px;top:{{top}}px;">标题</view>

结束

至此导航栏的替换已经完成，其它个性化样式根据自身需要调整即可。

微信小程序自定义顶部导航栏相关推荐

微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图: 如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用 ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...