直播系統開發，實現自適應手機狀態列高度的頂部導航欄

直播系統開發，實現自適應手機狀態列高度的頂部導航欄實現的相關程式碼

<!-- 頂部導航欄 -->
<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
}
});
}
};

以上就是 直播系統開發，實現自適應手機狀態列高度的頂部導航欄實現的相關程式碼，更多內容歡迎關注之後的文章