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

这篇具有很好参考价值的文章主要介绍了微信小程序自定义头部状态栏+滚动头部半透明效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求一：头部图片贯穿手机状态栏，及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})
    }
  },