小程序顶部自定义导航栏添加背景图的实现

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。

参考API：自定义导航栏

1：打开app.json,添加属性"navigationStyle":"custom",
这里的custom的意思，是指需要开发者自行设计定义顶栏的样式。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "navigationStyle":"custom",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

2：wxml

 <image class='site-img' data-id="{{item.deviceId}}" src="../../img/nav.jpg" catchtap='navmap'></image>

3:加完之后可以看到

注意：如果自定义导航栏，页面自带的返回按钮也会消失，需要用代码编写

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131.