小程序自定义导航栏、胶囊按钮菜单适配

作者: 菜鸟一枚kk | 来源:发表于2023-10-19 17:57 被阅读0次

小程序自定义导航栏
微信小程序技巧-02-导航条的使用
仿掘金项目顶部导航
微信小程序自定义顶部导航栏颜色和透明头部
### 导航栏NavigationBar的常见问题
【总结】2017.02.07
微信小程序全屏模式（自定义导航栏）
配置导航栏和tabbar
Swift 踩坑笔记（四）—— 导航条中使用自定义按键的坑
Taro 3.x 小程序导航栏高度等精确数据的hooks

在自定义小程序导航栏时，不同的手机，胶囊高度不一样、状态栏高度不一样
需要根据手机，动态的计算高度。
如下图：

截图.png
由上图可知：
自定义导航栏的高度：状态栏 + 导航栏高度

获取状态栏信息：wx.getSystemInfo(）
导航栏的高度：胶囊高度 + （高度差） * 2
获取胶囊信息：wx.getMenuButtonBoundingClientRect()
高度差：胶囊顶部距屏幕顶部距离 - 状态栏高度

// 胶囊信息
menu = wx.getMenuButtonBoundingClientRect() 
// 获取状态栏信息
system = wx.getSystemInfo
状态栏高度 = system.statusBarHeight 
胶囊高度 = menu.top
导航栏高度 = menu.top + (menu.top - system.statusBarHeight) * 2

小程序自定义导航栏
一、概念上面整体就是自定义导航栏的区域(包括状态栏)胶囊接口/*获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐...
微信小程序技巧-02-导航条的使用
一、自定义导航条 1、第三方：小程序自定义头部导航栏组件2、小程序实现自定义导航栏适配完美版 Github 注意...
仿掘金项目顶部导航
顶部导航之网站logo 添加导航菜单导航栏右侧登录注册按钮头部美化自定义样式
微信小程序自定义顶部导航栏颜色和透明头部
很多同学问酱茄小编，怎么在微信小程序中自定义导航栏的颜色，怎么改成透明背景，怎么修改右上角胶囊状按钮颜色，其实很简...
### 导航栏NavigationBar的常见问题
[TOC] 目录自定义导航栏按钮调整导航栏按钮位置自定义返回按钮后滑动返回手势失效全屏滑动返回手势导航栏...
【总结】2017.02.07
2017.02.07 - 计划公众号自定义菜单栏小程序侧边栏菜单效果实现小程序侧边栏菜单模板 - 实际完成 ...
微信小程序全屏模式（自定义导航栏）
要自定义导航栏，首先需要在app.json里设置：设置之后进入小程序就只剩下右上角的胶囊了。在设置导航栏样式时...
配置导航栏和tabbar
导航栏自定义导航栏 page.json中的配置项页面中给小程序自定义导航栏 tabbar
Swift 踩坑笔记（四）—— 导航条中使用自定义按键的坑
自定义导航栏按钮遇到的问题添加自定义导航栏按钮如何初始化 UIBarButtonItem 避免踩坑导航栏的颜色都...
Taro 3.x 小程序导航栏高度等精确数据的hooks
原理微信小程序现在提供了胶囊按钮的相关信息，现在可以精确计算导航栏高度和文字图标的对其了。 const { wi...