微信小程序自定义导航栏实例代码

背景

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

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

实现

step1 自定义

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

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

"navigationStyle": "custom"

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

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

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

step2 功能点

第二步 梳理导航栏的功能点

导航栏高度 包含两个部分：工具栏和title栏， 工具栏的高度一般是固定的20px，title栏的高度需要计算

导航栏内容的定制，需要识别当前页面的性质，根据不同的页面展示不同的内容，可以通过获取当前的页面路由栈来判定当前的页面性质

step3 导航栏组件基本结构

目前快狗打车小程序的基本结构

// navBar.wxml<cover-view class='place-holder'></cover-view><cover-view class='nav-bar'> <cover-view class='tool-bar' style='height: 20px'></cover-view> <cover-view class='title-bar'>  <cover-view class='left-cell'>   // scene0 常规首页 个人中心按钮   // scene1 非常规首页 回首页按钮   // scene2 嵌套页  返回上一页按钮 + 回首页按钮  </cover-view>  <cover-view class='center-cell'>   // scene0 常规首页 个性化title   // scene1 其他页 正常title  </cover-view>  <cover-view class='right-cell'>   // 占位用的  </cover-view> </cover-view></cover-view>