微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以用老版本的替换所有页面的小程序头来做。

​ 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太友好，屏幕会乱划。所以针对性的改动了这些功能，因为才学小程序两三天，所以其中踩了很多坑，但好在最后效果还是达到了。

下面是效果图：

原理其实就是通过将原来的头禁用，然后PAGE自然而然的顶上去以后，定义一个头的组件，将他设置成fixed布局固定在原来头的部分，然后给page加上Margin-top，所以还原原来的感觉。背景待会再说。

1.app配置

​ 首先禁用所有头导航，在app.json的window里加一行这个，你会发现所有头都消失了。然后禁止滑动页面，滑动问题用scroll-view解决

"window": { "navigationStyle": "custom"}, "disableScroll": true

​ 然后在app.js里获取导航头的高度的全局数据

// app.jsApp({ globalData: { statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] }, // 判断是否由分享进入小程序 if (e.scene == 1007 || e.scene == 1008) {  this.globalData.share = true } else {  this.globalData.share = false } //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度） //这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把 //页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙 //虽然最后解决了，但是花费了不少时间 wx.getSystemInfo({  success: res => {  this.globalData.height = res.statusBarHeight  } }) }, globalData: { userInfo: null, share: false, // 分享默认为false height: 0 // 顶部高度 }})

在app.wxss给page加一个高度百分之百。

/* app.wxss */page { height: 100%;}

​ app配置到这里应该完事了。

2.组件配置

组件结构：