uniapp 解决app头部导航和手机顶部状态栏叠加问题及样式拼接写法
app开发,手机顶部状态栏会和app头部导航叠加在一起解决方法:拿到顶部状态栏的高度,再给头部导航加个padding-top在app.vue里拿到状态栏的高度并存放在globalData里onLaunch() {const that = this;uni.getSystemInfo({success(res) {that.globalData.statusBarHeight = res.statu
·
app开发,手机顶部状态栏会和app头部导航叠加在一起
解决方法:拿到顶部状态栏的高度,再给头部导航加个padding-top
在app.vue里拿到状态栏的高度并存放在globalData里
onLaunch() {
const that = this;
uni.getSystemInfo({
success(res) {
that.globalData.statusBarHeight = res.statusBarHeight;
}
})
},
globalData:{
statusBarHeight:'',//手机顶部状态栏高度
}
页面里
<view class="headerIcon" :style="{ 'padding-top': statusBarHeight + 'px' }">//头部导航加padding给状态栏腾地
//:style="{height: 'calc(100% - 90rpx - ' + matop + ');'}"
data(){
return {
statusBarHeight:getApp().globalData.statusBarHeight,//状态栏高度
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)