我要评论思路
自定义导航栏高度组成：状态栏（绿色部分）、导航栏（蓝色部分）
状态栏
通过调用 wx.getsysteminfosync 获取
const res = wx.getsysteminfosync()
this.setdata({
statusbarheight:res.statusbarheight
})
导航栏
通过获取右上角胶囊的位置信息计算，navbarpadding为导航栏上下的间隙
let res = wx.getmenubuttonboundingclientrect()
let navbarpadding = (res.top - this.data.setstatusbarheight) * 2
this.setdata({
navbarheight: res.height + navbarpadding
})
代码
app.js:
app({
onlaunch () {
this.setstatusbarheight()
this.setnavbar()
},
//设置系统状态栏高度
setstatusbarheight(){
try {
const res = wx.getsysteminfosync()
this.globaldata.statusbarheight = res.statusbarheight
}catch(error){
console.log(error)
}
},
//设置导航栏height
setnavbar(){
let res = wx.getmenubuttonboundingclientrect()
let navbarpadding = (res.top - this.data.setstatusbarheight) * 2
this.globaldata.navbarheight = res.height + navbarpadding
},
globaldata: {
statusbarheight: 20,
navbarheight: 44
}
})
wxml:
<view class="top-bar-wrap">
<view class="top-bar-main" style="padding-top:{{statusbarheight}}px;height:{{navbarheight}}px">
自定义导航栏
</view>
</view>
wxss:
.top-bar-wrap{
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.top-bar-main{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color:#fff;
}
js:
const app = getapp()
component({ data: { statusbarheight: app.globaldata.statusbarheight, navbarheight: app.globaldata.navbarheight } })
最后
setstatusbarheight、setnavbar这两个方法最好写到app.js中，获取好放在app.globaldata中，这两个高度可能不止自定义导航栏需要用到。
比如使用了自定义导航栏的页面，因为自定义导航栏是fixed定位脱离文档流，导致整个页面就会上移，所以要给页面加上padding-top，高度跟自定义导航栏的高度一致，即 statusbarheight + navbarheight。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论