小程序顶部自定义导航

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

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后前端妹子，爱编程，爱运营，爱折腾。