<template>
<view>
<!-- 自定义导航栏 -->
<view class="navBarBox">
<!-- 状态栏占位 -->
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
<!-- 真正的导航栏内容 -->
<view class="navBar">
<!-- 以下定义导航栏的样式 -->
<!-- <view class="left">
<text>消息</text>
<text>课群</text>
</view> -->
</view>
</view>
<!-- 页面内容 -->
<view>我是页面内容</view>
</view>
</template>
<script>
export default {
data() {
return {
// 状态栏高度
statusBarHeight: 0,
};
},
props: {
},
//第一次加载时调用
created() {
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
},
}
</script>
<style lang="scss">
.navBarBox{
.statusBar{
background-color: $system-blue ;
}
.navBar {
background-color: $system-blue;
padding: 3rpx 20rpx 3rpx 50rpx;
padding-bottom: 8rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 93rpx;
line-height: 93rpx;
justify-content: space-between;
}
}
</style>