微信小程序如何编写自定义导航栏的实例代码？

本文共计1548个文字，预计阅读时间需要7分钟。

背景：在制作快狗打车小程序时，关于默认导航栏，我们遇到了以下问题：

1. Android、iOS手机对于页面title的展示不一致，安卓title的显示不居中。

2.页面的title只支持纯文本级别的格式控制。

背景

在做快狗打车小程序时，关于默认导航栏，我们遇到了以下的问题：

• Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中
• 页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果
• 左上角的事件无法监听、定制
• 路由导航单一，只能够返回上一页，深层级页面的返回不够友好

我们希望的是：在各个机型页面上title一致性 & 个性化展示、取得左上角点击事件控制权及深层级页面的一键返回

实现

step1 自定义

第一步 取得导航栏的控制权

小程序支持自定义导航栏，只需要在app.json文件中，window项中配置

"navigationStyle": "custom"

这样微信就放开了导航栏的控制权，只保留右上角的胶囊。

页面会从视窗的顶部开始渲染，如图

接下来，我们要做的就是实现一个导航栏组件，把它放置在页面原来的默认导航栏的位置，内容什么的完全由开发者自己定制。