自定义小程序导航栏


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

自定义小程序导航栏_第1张图片


此时显示效果为:

自定义小程序导航栏_第2张图片

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

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

view1:

css:

.notifycation-bar{

  background: #fff;

  width: 100%;

}

view2:

自定义导航栏

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


自定义小程序导航栏_第3张图片

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

你可能感兴趣的:(自定义小程序导航栏)