直播系统开发，实现自适应手机状态栏高度的顶部导航栏实现的相关代码

 

<!-- 顶部导航栏 -->
<template>
<view>
<view :class="isFix ? '' : 'flx'" :style="{ 'padding-top': statusHeight + 'px', 'background-color': bgColor ? bgColor : '#FFF' }">
<view>
<view class="top-module left-the" @tap="backPage">
<image src="./back-icon.svg" v-if="isBack"></image>
<slot name="left-slot"></slot>
</view>
<view class="top-module center-the"><slot name="center-slot"></slot></view>
<view class="top-module right-the">
<!-- <text>1</text> -->
<slot name="right-slot"></slot>
</view>
</view>
</view>
<view :style="{ height: 'calc(' + statusHeight + 'px + 80rpx)' }" v-if="!isFix"></view>
</view>
</template>
<script>
/**
 * 
 * @description 顶部导航栏
 * slot:
 *  left-slot:左侧插槽
 *  center-solt:中间插槽
 *  right-solt:右侧插槽
 * @property {String}  bgColor 顶部导航栏颜色;默认值：#FFF
 * @property {String, Boolean} isBack 是否显示返回;默认值：true
 * @property {String, Boolean} isBackFunction 左侧插槽是否绑定返回事件;默认值：true
 * @property {String, Boolean} isFix 是否固定在顶部，不悬浮;默认值：true
 * @example 
 * <top-navigation :isBack="true" :bgColor="themeColors.white"><template #center-slot><view>信息</view></template></top-navigation>
 * 
 *   */
export default {
name: 'top-navigation',
data() {
return {};
},
props: {
bgColor: {
type: String,
default: ''
},
isBack: {
type: [Boolean, String],
default: true
},
isBackFunction: {
type: [Boolean, String],
default: true
},
isFix: {
type: [Boolean, String],
default: true
}
},
computed: {
},
methods: {
backPage() {
if (!this.isBackFunction) {
return;
}
uni.navigateBack({
delta: 1
});
}
}
};
</script>
<style scoped>
.title-bar {
width: 750rpx;
height: auto;
z-index: 20;
// position: relative;
}
.top-box {
height: auto;
min-height: 80rpx;
width: 750rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
box-sizing: border-box;
.back-button {
width: 40rpx;
height: 40rpx;
}
.top-module {
min-width: 150rpx;
width: auto;
display: flex;
align-items: center;
}
.left-the {
justify-content: flex-start;
}
.right-the {
justify-content: flex-end;
}
.center-the {
justify-content: center;
font-weight: 550;
font-size: 30rpx;
}
}
.flx {
position: fixed;
top: 0rpx;
}
</style>

​同时还需要在App.vue中实现在Vue原型链中放入状态栏高度

 

import Vue from 'vue';
export default {
onLaunch: function() {
uni.getSystemInfo({
success: e => {
Vue.prototype.statusHeight = e.statusBarHeight;
Vue.prototype.screenHeight = e.screenHeight;
// // #ifdef H5
// Vue.prototype.statusHeight += 30
// // #endif
}
});
}
};

以上就是 直播系统开发，实现自适应手机状态栏高度的顶部导航栏实现的相关代码，更多内容欢迎关注之后的文章