如下图所示，需要将自定义导航栏的背景图和下方page内容的背景图片拼接上并且对齐

拼接.png

首先我们算出自定义头部的高度，头部设置height为该高度

const sysinfo = wx.getSystemInfoSync()
// 状态栏高度
const statusHeight = sysinfo.statusBarHeight
const isiOS = sysinfo.system.indexOf('iOS') > -1
// 导航栏高度
let navHeight = 0
if (!isiOS) {
  // 安卓手机
  navHeight = 48;
} else {
  // iOS手机
  navHeight = 44;
}
// 自定义头部总高度
const height = navHeight + statusHeight;
this.setData({
  headerHeight: height
})

在html中设置自定义头部的高度

<view class='nav' style='height: {{headerHeight}}px;'>
...
</view>

给自定义头部设置背景图片并设置背景图片的大小都是100%

background: url(https:....png) no-repeat left top / 100% 100%;

内容page的背景图片的高度应该设置多少呢?可以根据UI设计图再结合自定义头部的高度就可以算出来

背景图.png

头部背景的高度176rpx / 自定义头部的高度 = 内容区的高度392rpx / 内容区背景图片的高度

也就是

const contentHeight = 392 / (176 / this.data.headerHeight)
this.setData({
  contentHeight
})

最后在页面的html中设置标签的style的高度和背景图片的大小background-size

<view class="orderBox" style="min-height: {{contentHeight}}px;background-size: 100% {{contentHeight}}px">
...
</view>