uniapp实现自适应手机状态栏高度的顶部导航栏

<!-- 顶部导航栏 -->
<template><view><block v-if="!onlyShowStatusBar"><image :src="imgSrc" v-if="imgSrc" class="bg-img" mode="widthFix"></image><view class="title-bar-appbar" :class="isFix ? '' : 'flx'" :style="{ 'padding-top': calculateStatusBar, background: bgColor ? bgColor : '#FFF' }"><view class="top-box" :style="{ 'min-height': `${height}rpx` }"><view class="top-module left-the"><image class="back-button" src="./back-icon.png" @tap="backPage" mode="aspectFit" 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"><slot name="right-slot"></slot></view></view></view><view class="title-bar-placeholder" :style="{ height: calculateHeight }" v-if="!isFix"></view></block><view v-else style="width: 750rpx;" :style="{ height: calculateStatusBar }"></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* @property {String}             imgSrc              导航栏背景图;默认值：空* @property {String, Boolean}  onlyShowStatusBar    是否仅占位状态栏    默认值：false* @property {Number}           height              状态栏高度，单位Rrpx 默认值：88* @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: 'transparent'},isBack: {type: [Boolean, String],default: true},isBackFunction: {type: [Boolean, String],default: true},isFix: {type: [Boolean, String],default: false},imgSrc: {type: String,default: ''},onlyShowStatusBar: {type: [Boolean, String],default: false},height: {type: [Number],default: 88}},computed: {calculateHeight() {return `calc(${this.statusHeight}px + ${this.height}rpx)`;},calculateStatusBar() {return `${this.statusHeight}px`;}},methods: {backPage() {if (!this.isBackFunction) return;uni.navigateBack({delta: 1});}}
};
</script><style lang="scss" scoped>
.title-bar {width: 750rpx;height: auto;position: relative;
}
.title-bar-appbar {@extend .title-bar;z-index: 2;
}
.title-bar-placeholder {@extend .title-bar;z-index: 1;
}
.top-box {height: auto;min-height: 88rpx;width: 750rpx;display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;box-sizing: border-box;.back-button {width: 35rpx;height: 35rpx;margin-right: 28rpx;}.top-module {min-width: 50rpx;width: auto;display: flex;align-items: center;font-size: 36rpx;font-weight: 500;}.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;
}
.bg-img {width: 750rpx;position: absolute;top: 0rpx;z-index: 1;
}
</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;Vue.prototype.screenWidth = e.screenWidth;Vue.prototype.platform = e.platform;}});}
};

uniapp实现自适应手机状态栏高度的顶部导航栏相关推荐

UNI-APP_uni-ap自动获取状态栏高度，自定义导航栏组件
自定义导航样式一 <template><view><view class="header" :style="'height:'+(statu ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
小程序自定义顶部导航栏
上篇博客自定义了一个底部导航栏,效果还可以,但是我在开发过程中又遇到了一个棘手的问题.就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去,这就麻烦了,因为中间的容器页面无论第几个都是在外面的主界面里 ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
仿比心源码，uniApp自适应手机屏幕高度
仿比心源码,uniApp自适应手机屏幕高度 // 获取屏幕高度用res.screenHeight let _this = this; //uni.getSystemInfoSync异步接口uni.ge ...
uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』
在page.json设置页面沉浸式状态栏时踩的坑,发现这个沉浸式直接到手机屏幕顶端,不理睬系统的状态栏( 时间那一栏系统状态栏 ) {"path": "pages/det ...
uni-app 顶部导航栏高度计算 + 胶囊高度计算
uni-app 顶部导航栏高度计算 + 胶囊高度计算文章目录 uni-app 顶部导航栏高度计算 + 胶囊高度计算 uni-app 一.顶部导航栏高度计算二.胶囊高度计算总结 uni-app u ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
uniapp隐藏页面顶部导航栏和手机系统顶部导航栏
1.隐藏页面导航栏: pages.json文件在"style":{ "app-plus":{ "titleNview": false } ...

uniapp实现自适应手机状态栏高度的顶部导航栏

uniapp实现自适应手机状态栏高度的顶部导航栏相关推荐

最新文章

热门文章