微信小程序个性化navigationBar顶部导航栏设计与全机型适配指南（含实例代码）
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文提供微信小程序个性化navigationBar的设计方案及全机型适配技巧，并附带实用示例代码，助您轻松实现自定义顶部导航栏。
前言
navigationBar想必大家都很熟悉吧？今天我们就来讲讲如何自定义navigationBar，并将其变为我们想要的样子（例如：搜索框+胶囊按钮、搜索框+返回按钮+胶囊按钮等）。
思路
1. 隐藏原生的导航栏样式。
2. 获取胶囊按钮和状态栏的相关数据，以便后续计算使用。
3. 根据不同设备型号计算出该机型的导航栏高度，进行适配处理。
4. 编写新的自定义navigationBar。
5. 将其引用到页面中。
正文
一、隐藏原生的navigationBar
在window全局配置里有一个参数：navigationStyle（导航栏样式）。设置为custom即可实现自定义样式。例如：
```javascript
window: {
navigationStyle: custom
}
```
这样就可以把默认的navigationBar给隐藏起来，接下来我们就可以根据需要来自定义它了。
全部评论 (0)
还没有任何评论哟~
