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

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

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

//wxml

<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="" />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})}},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！