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

news/2024/12/22 11:02:30/
<!-- 顶部导航栏 -->
<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;}});}
};

http://www.ppmy.cn/news/804558.html

相关文章

android 状态栏wifi,【技术贴】教你修改状态栏里的wifi、信号、电量图标(转自论坛)...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 原帖地址:http://www.miui.com/forum.php?mod=viewthread&tid=1745173 素材地址:http://pan.baidu.com/share/link?shareid=2354935872&uk=1009070904 首先,你要有一个主题包(这儿就拿个例子。比如,我要替换xxx.mtz…

android 状态栏显示流程,基于Android系统的跨屏状态栏实现方法与流程

本发明属于车机应用技术领域,具体涉及一种基于Android系统的跨屏状态栏实现方法。 背景技术: 目前,燃油车、新能源车等各类型车辆迅速发展。同时,与手持移动终端的发展趋势相似——从以黑莓品牌为代表的全键盘手机演进至以苹果品牌的全触控手机——车机系统同样在发生明显变…

苹果状态栏HTML,iphoneX 适配客户端H5页面的方法教程

前言 目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP还是写前端H5.都是要考虑移动端的兼容性。 由于iphoneX做了全面屏并且还保留一块小刘海,因此很多以前的移动端H5页面需要结合App客户端做出相…

ios的状态栏(UIStatusBar)

http://my.oschina.net/shede333/blog/304560

如何用计算机打开苹果手机,苹果手机如何投屏到电脑

可以利用苹果电脑自带的【QuickTime】 &#xff0c;手机USB连接电脑&#xff0c;打开【QuickTime】 然后点击【影片录制】&#xff0c;即可实现手机实时镜像到电脑&#xff1b;可以利用airplay镜像功能&#xff0c;把手机和电脑连接到同一wifi网络中进行投屏。以下是具体步骤&a…

android头条的状态栏_今日头条如何设置电脑版 今日头条苹果手机任务栏在哪

今日头条有没有电脑端&#xff1f;如何安装&#xff1f; 没有计算机终端&#xff0c;但是有一个PC终端&#xff0c;可以直接通过打开www.toutiao.com网站登录。 电脑版今日头条应该如何设置&#xff1f; 我不知道你想怎么设置它。如果是昵称、头像和签名&#xff0c;我可以教你…

获取顶部状态栏高度

//获取顶部status bar 高度 private int getStatusBarHeight() {Resources resources mActivity.getResources();int resourceId resources.getIdentifier("status_bar_height", "dimen","android");int height resources.getDimensionPixelS…

ios 系统状态栏样式修改_iOS_状态栏字体颜色修改(完美解决)

情况1:如何把所有界面的状态栏的字体颜色都设置为黑色 情况2:如何把所有界面的状态栏的字体颜色都设置为白色 如果所有的界面继承了一个共同的父类,可以使用下面的方法: 第一步:在info.plist中添加一个字段或者修改已有该字段:view controller -base status bar 设置为NO…