直播系统开发，实现自适应手机状态栏高度的顶部导航栏实现的相关代码
<!-- 顶部导航栏 --><template><view><view class="title-bar" :class="isFix ? '' : 'flx'" :style="{ 'padding-top': statusHeight + 'px', 'background-color': bgColor ? bgColor : '#FFF' }"><view class="top-box"><view class="top-module left-the" @tap="backPage"><image class="back-button" 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 class="title-bar" :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 class="mine-name">信息</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 lang="scss" 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}});}};
以上就是 直播系统开发，实现自适应手机状态栏高度的顶部导航栏实现的相关代码，更多内容欢迎关注之后的文章
