这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以用老版本的替换所有页面的小程序头来做。
参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太友好，屏幕会乱划。所以针对性的改动了这些功能，因为才学小程序两三天，所以其中踩了很多坑，但好在最后效果还是达到了。
下面是效果图：
原理其实就是通过将原来的头禁用，然后PAGE自然而然的顶上去以后，定义一个头的组件，将他设置成fixed布局固定在原来头的部分，然后给page加上Margin-top，所以还原原来的感觉。背景待会再说。
1.app配置
首先禁用所有头导航，在app.json的window里加一行这个，你会发现所有头都消失了。然后禁止滑动页面，滑动问题用scroll-view解决
"window": { "navigationStyle": "custom" }, "disableScroll": true
然后在app.js里获取导航头的高度的全局数据
// app.js App({ 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.组件配置
组件结构：
放源码吧
// navbar.wxml <view> <!-- 导航栏背景图片 --> <image src="https://www.jb51.net/{{navbarData.address}}" bindload="imgLoaded" /> <!-- // 导航栏 中间的标题 --> <view wx:if='{{!navbarData.white}}'> {{navbarData.title}} </view> <view wx:else='{{!navbarData.white}}'> {{navbarData.title}} </view> <view> <!-- // 导航栏 左上角的返回按钮 --> <!-- // 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 --> <view wx:if='{{navbarData.showCapsule}}'> <!-- //左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示 --> <!-- //从分享进入小程序时 返回上一级按钮不应该存在 --> <!-- navbarData.white是控制按钮颜色的，因为背景有深浅色,返回按钮自己找图片 --> <view bindtap='_navback' wx:if='{{!share&&navbarData.white}}'> <image src='../../images/返 回 (1).svg' mode='aspectFit'></image> </view> <view bindtap='_navback' wx:else='{{!share}}'> <image src='../../images/返 回.svg' mode='aspectFit'></image> </view> </view> </view> </view> <!-- 导航栏下面的背景图片 --> <image src="https://www.jb51.net/{{navbarData.address}}" bindload="imgLoaded" />
CSS：
/* navbar.wxss */ /* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */ .nav-wrap { /* display: none; */ position: fixed; width: 100%; top: 0; background: #fff; color: #000; z-index: 9999999; background: #000; overflow: hidden; } /* 背景图 */ .backgroundimg { position: absolute; z-index: -1; } /* 标题要居中 */ .nav-title { position: absolute; text-align: center; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 36rpx; color: #2c2b2b; font-weight: 450; } .nav-capsule { display: flex; align-items: center; margin-left: 30rpx; width: 140rpx; justify-content: space-between; height: 100%; } .back-pre { width: 32rpx; height: 36rpx; margin-top: 4rpx; padding: 10rpx; } .nav-capsule { width: 36rpx; height: 40rpx; margin-top: 3rpx; }
在JSON里声明我是个组件
{ "component": true, "usingComponents": {} }
最后是js。