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

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

 

1

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

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

 

1

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

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