如下图所示，需要将自定义导航栏的背景图和下方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，再结合自定义头部的高度，得出的关系是:
头部背景的高度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>
