小程序获取头部高度+自定义头部变色

小程序获取头部高度+自定义头部变色

wxml部分：
<scroll-view scroll-y="true" style="height: 100vh;" bindscroll="scroll" > <view style="height:{{height}}px;width:100%; opacity:{{opacity}};" class="tou"></view> </scroll-view>

wxss部分：

.tou{
  background: #4C5BE0;
  opacity:0;
  transition: all 1s;
  -webkit-transition: all 1s;
  display: flex;
  align-items: flex-end;
  position: relative;
}

js部分 ：当前封装的方法直接在onShow下调用即可
调用封装以下的方法
onShow: function (options) {
this.height()
},

height(){
// 获取状态栏高度
const { statusBarHeight } = wx.getSystemInfoSync();
// 得到右上角菜单的位置尺寸
const menuButtonObject = wx.getMenuButtonBoundingClientRect();
const { top, height } = menuButtonObject;
// 计算导航栏的高度
// 此高度基于右上角菜单在导航栏位置垂直居中计算得到
const navBarHeight = height + (top - statusBarHeight) * 2;
console.log(navBarHeight)
// 计算状态栏与导航栏的总高度
const statusNavBarHeight = statusBarHeight + navBarHeight;
console.log(statusNavBarHeight)
this.setData({
height:statusNavBarHeight
})
console.log(this.data.height)
},

小程序滑动页面时头部变色
scroll(e) {
if(e.detail.scrollTop>0){
this.setData({
opacity:“1”
})

}else{
  this.setData({
    opacity:"0"
  })
}

},