微信小程序中自定义背景导航栏透明背景设置

首先确定好自己要在哪个页面中使用自定义头部导航栏样式

在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom"

 

这样在页面中头部自带的样式就不见啦

微信小程序中自带当前设备头部高度的api

wx.getSystemInfoSync().statusBarHeight（在xxx.js文件中添加）

这只是最上那一部分头部的高度，其中不包含头部文字部分 。

如果想在头部中加上文字或者图片，我一般会在wx.getSystemInfoSync().statusBarHeight+45

wxml中可以写成 大盒子高度是style="height:{{navH+45}}px"

添加内容的小盒子高度是style="height:{{navH=45}}rpx"

再给小盒子设置为绝对定位为bottom：0；这样就会在头部最下方显示

提示：基本上大盒子都是固定定位，因为下边的盒子如果长度够长的话会出现滚动，固定定位的话，就可以不影响头部的问题，但是会出现层级的问题，尽量给大盒子设置的层级高一点！