app.vue中获取个高度
<script>
export default {
onLaunch() {
// uni.getSystemInfo 获取设备信息
// uni.getMenuButtonBoundingClientRect 获取胶囊数据
// uni.setStorage 异步本地存储
uni.getSystemInfo({
success: (res) => {
const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
const statusBarHeight = res.statusBarHeight //状态栏高度
const navHeight = menuButton.height + navBarPadding // nav高度
const headerHeight = navHeight + statusBarHeight // 总高度
uni.setStorage({
key: 'navData',
data: {statusBarHeight,navHeight,headerHeight}
})
console.log(statusBarHeight, navHeight, headerHeight, ) // 20 40 60 iphone6/7/8
}
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
封装导航组件
<template>
<view>
<view class="navBar">
<view class="navBar_statusBar" :style="{height: statusBarHeight + 'px'}"></view>
<view class="navBar_head" :style="{height: navHeight + 'px',lineHeight: navHeight + 'px'}">
<view class="navBar_callback">
<image v-if="callback" @click="callBack" src="../static/vertical/callBack.png"></image>
</view>
<p class="navBar_content">{{content}}</p>
</view>
</view>
<view class="navBox" :style="{height: headerHeight + 'px'}"></view>
</view>
</template>
<script>
export default {
props: {
callback: {
type: Boolean,
default: true
},
content: {
type: String,
default: '首页'
}
},
data() {
return {
statusBarHeight: '',
navHeight: '',
headerHeight: '',
};
},
created() {
let _this = this
uni.getStorage({
key: 'navData',
success({ data }) {
_this.statusBarHeight = data.statusBarHeight
_this.navHeight = data.navHeight
_this.headerHeight = data.headerHeight
}
});
},
methods: {
callBack() {
uni.navigateBack({
})
}
}
}
</script>
<style lang="scss">
.navBar {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: $green;
width: 750rpx;
.navBar_head {
padding: 0 56rpx;
display: flex;
align-items: center;
height: 53rpx;
font-size: 36rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
line-height: 53rpx;
text-align: center;
.navBar_callback {
position: absolute;
left: 56rx;
image {
width: 30rpx;
height: 30rpx;
}
}
.navBar_content {
width: 100%;
}
}
}
.navBox {
width: 750rpx;
}
</style>