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

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

// 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 {
 height: 100%;
}

// navbar.wxml

<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
 <!-- 导航栏背景图片 -->
 <image class="backgroundimg" src="{{navbarData.address}}" bindload="imgLoaded"  />
 <!-- // 导航栏 中间的标题 -->
 <view class='nav-title' wx:if='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px;'>
 {{navbarData.title}}
 </view>
 <view class='nav-title' wx:else='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px; color:#ffffff'>
 {{navbarData.title}}
 </view>
 <view style='display: flex; justify-content: space-around;flex-direction: column'>
 <!-- // 导航栏 左上角的返回按钮 -->
 <!-- // 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 -->
 <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
  <!-- //左上角的返回按钮，wx:if='{{!share}}'空制返回按钮显示 -->
  <!-- //从分享进入小程序时 返回上一级按钮不应该存在 -->
  <!-- navbarData.white是控制按钮颜色的，因为背景有深浅色,返回按钮自己找图片 -->
  <view bindtap='_navback' wx:if='{{!share&&navbarData.white}}'>
  <image src='../../images/返 回 (1).svg' mode='aspectFit' class='back-pre'></image>
  </view>
  <view bindtap='_navback' wx:else='{{!share}}'>
  <image src='../../images/返 回.svg' mode='aspectFit' class='back-pre'></image>
  </view>
 </view>
 </view>
</view>
<!-- 导航栏下面的背景图片 -->
<image class="backgroundimg" src="{{navbarData.address}}" bindload="imgLoaded"  />

/* 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;
}

{
 "component": true,
 "usingComponents": {}
}

const app = getApp()
Component({
 properties: {
 navbarData: {
  //navbarData 由父页面传递的数据，变量名字自命名
  type: Object,
  value: {},
  observer: function(newVal, oldVal) {}
 }
 },
 data: {
 height: '',
 //默认值 默认显示左上角
 navbarData: {
  showCapsule: 1
 },
 imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度
 imageHeight: '' // 背景图片的长度，通过计算获取
 },
 attached: function() {
 // 获取是否是通过分享进入的小程序
 this.setData({
  share: app.globalData.share
 })
 // 定义导航栏的高度 方便对齐
 this.setData({
  height: app.globalData.height
 })
 },
 methods: {
 // 返回上一页面
 _navback() {
  wx.navigateBack()
 },
 // 计算图片高度
 imgLoaded(e) {
  this.setData({
  imageHeight:
   e.detail.height *
   (wx.getSystemInfoSync().windowWidth / e.detail.width)
  })
 }
 //返回到首页
 // _backhome() {
 // wx.switchTab({
 //  url: '/pages/index/index'
 // })
 // }
 }
})

<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<scroll-view scroll-y >
 <view class="scroll-view-item" style='padding-top: {{height}}px;'>我是内容</view>
</scroll-view>

{
 "usingComponents": {
 "nav-bar": "../../components/navbar/navbar"
 },
 "navigationBarTextStyle": "white"
}

const app = getApp()
Page({
 data: {
  // 导航头组件所需的参数
  nvabarData: {
   showCapsule: 1, //是否显示左上角图标  1表示显示  0表示不显示
   title: '标题', //导航栏 中间的标题
   white: true, // 是就显示白的，不是就显示黑的。
   address: '../../images/蒙版组 1@2x.png' // 加个背景 不加就是没有
  },
  // 导航头的高度
  height: app.globalData.height * 2 + 20
 }
})