自定义小程序导航栏

项目中，有时候系统的导航栏不能满足项目需求，此时就需要自定义导航栏小程序项目目录app.json中window节点添加"navigationStyle": "custom"，完整结构为：

此时显示效果为：

这时候我们就需要自定义导航栏。

定义两个view，用来占位，view1高度设置为通知栏的高度，view2就是我们要自定义的导航栏

view1:

<view class='notification-bar' style='height:{{startbarheight}}px' />

css：

.notifycation-bar{

  background: #fff;

  width: 100%;

}

view2:

<view class='titlebar' style='height:{{navgationheight}}px'>

<image class='back-icon' src='./image/ic-back.png' bindtap='bindvack' />

<text>自定义导航栏</text>

</view>

startbarheight和navgationheight定义在app.js文件中，相关代码：

完成代码：https://github.com/longtengyiyu/customMiniProgramNavigation/tree/develop/customTitleBar