微信小程序如何自定义导航栏背景图片和头部导航栏样式？

本文共计2259个文字，预计阅读时间需要10分钟。

这两天气氛有点沉重，因为要做一个带背景的小程序头部。导航栏有背景也算在内，还得让背景上下滚动，心情小失落。现在可以单独设置一个页面的小程序头部，但之前提到的是要微信小程序。

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

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

下面是效果图：

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

1.app配置

​ 首先禁用所有头导航，在app.json的window里加一行这个，你会发现所有头都消失了。