微信小程序自定义头部状态栏+滚动头部半透明效果

需求一：头部图片贯穿手机状态栏，及nav的标题胶囊等：（返回图标 标题 胶囊）

• 思路：状态栏那一横块自定义后会自动往上跑，下方背景图片块默认向上填充，此时两块是重叠状态
  通过微信自带方法设置状态栏高度，宽度等

//wxml
<!-- header -->
<view class="header common_fbox {{isScrollbg?'header-scroll':''}}" style="height: {{navHeight+10}}px;" >
    <view class="common_zbox common_flex" style="height: {{navHeight}}px;" >
        <view class="back-home" style="margin-top:{{customMarginTop}}px; height: {{customHeight}}px;line-height: {{customHeight}}px;" bindtap="goBack">
            <image src="/static/images/home.png" alt="" />
            <!-- <text>返回</text> -->
        </view> 
        <view class="fome-title" style="margin-top:{{customMarginTop}}px; height: {{customHeight}}px;">
          <text>xxxx标题</text>
        </view>
       <view style="width: {{100% - customWidth}}px"></view>
        
    </view>
</view>
<!-- 背景图片 -->
<view class="form-bg">
  <image src="{{bgpic}}" mode=""/>
</view>

/公共复用*/
view,image,input,text,button,textarea {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* font-size: 0; */
}
input,textarea{
  outline: none;
  border: none;
}
.common_fbox{
  width:750rpx;
  max-width:750rpx;
  /* background: #fff; */
  margin: 0 auto;
}
.common_zbox{
  width: 750rpx;
  padding: 0 15rpx;
  margin: 0 auto;
}
.common_flex{ 
  display: flex;
}
/*---*/
/*header  */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: all 0.3s ease-in-out;
}
.header-scroll{
  background:rgba(0,0,0,0.4);
}
.header .common_zbox{
   width: 100%;
}
.header .common_flex>view{
  width: 33.3333%;
}
.header .back-home {
  width: 60rpx;
  padding-left: 40rpx;
  text-align: left;
}
.header .back-home>image,.header .back-home>text{
  vertical-align: middle;
}
.header .back-home image{
  width:36rpx;
  height: 36rpx;
}
.header .back-home text{
  font-size: 28rpx;
  color: #3269ff;
}
.header .fome-title{
  height: 60rpx;
  border-radius:30rpx;
  text-align: center;
  line-height:60rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header .fome-title text{
  font-size:34rpx ;
  color:#fff ;
}

data:{
	isScrollbg:false,//滑动头部半透明
    navHeight: '',
    menuButtonInfo: {},//头部胶囊信息
    customMarginTop: 0, // 自定义头部上边距
    customWidth: 0, // 自定义头部宽度
    customHeight: 0, // 自定义头部高度
}
 onLoad(options) {
    this.setStatusBar();//设置状态栏高度
  },
  //设置状态栏高度
 setStatusBar(){
    this.setData({menuButtonInfo:wx.getMenuButtonBoundingClientRect()});
   
    const { top, width, height, right } = this.data.menuButtonInfo;
    wx.getSystemInfo({//获取状态栏信息
      success: (result) => {
        const {statusBarHeight}= result;
        const margin = top - statusBarHeight;
        this.setData({
          navHeight:(height+statusBarHeight+(margin*2)),
          customMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
          customHeight: height,  // 与胶囊按钮同高
          customWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度

        })
      },
    })
  },
  // 页面滚动事件:设置状态栏在滚动后变成半透明
  onPageScroll(e){
    let that = this;
    if(e.scrollTop>100){
      that.setData({isScrollbg:true})
    }else{
      that.setData({isScrollbg:false})
    }
  },