uniapp 设置安全区域

server/2024/11/14 2:12:40/
javascript"><!-- 获取安全区域 -->
<script setup lang="ts">
import { computed, ref } from 'vue'let systemType = ref('1')
// #ifdef APP-PLUS || H5  || APP-PLUS-NVUE
systemType.value = '1'
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets, 'safeAreaInsets')
const prop = defineProps({title: {type: String,default: '消息',},
})
// #endif// #ifdef MP-WEIXIN
systemType.value = '2'
const navbarHeight = ref(0)
//计算刘海状态栏
navbarHeight.value = uni.getSystemInfoSync().statusBarHeight || 0
//计算胶囊区域的高度
let { top, height } = uni.getMenuButtonBoundingClientRect()
const titleBarHeight = computed(() => {return (top - navbarHeight.value) * 2 + height
})
// #endif
</script><template><view v-if="systemType == '1'" class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'rpx' }"><view class="search">{{ title }}</view></view><view v-if="systemType == '2'"><view class="fill" :style="{ height: navbarHeight + 'px' }"></view><view class="title" :style="{ height: titleBarHeight + 'px' }"> 消息 </view></view>
</template><style lang="scss">
.navbar {background-size: cover;position: relative;display: flex;flex-direction: column;padding-top: 20px;// .leftBack {//   position: absolute;//  top: 200rpx;// }.search {display: flex;align-items: center;justify-content: center;padding: 0rpx 10rpx 0 26rpx;height: 64rpx;line-break: 64rpx;//ui标记距离上面22rpxmargin: 44rpx 20rpx 0 20rpx;color: #1f1f1f;font-weight: 600;font-size: 28rpx;border-radius: 32rpx;}
}
.fill {width: 100%;
}
.title {width: 100%;display: flex;justify-content: center;align-items: center;
}
</style>

uniapp 设置安全区域以及导航栏和胶囊对齐 要注意app没有胶囊没法获取 要另外写样式(已完善)

ps:真就是每个公司总有那么几个表现狗 真他妈的恶心 得拓展一下自己的知识宽度 找下家了

 


http://www.ppmy.cn/server/141734.html

相关文章

微软日志丢失事件敲响安全警钟

NEWS | 事件回顾 最近&#xff0c;全球最大的软件公司之一——微软&#xff0c;遭遇了一场罕见的日志丢失危机。据报告&#xff0c;从9月2日至9月19日&#xff0c;持续长达两周的时间里&#xff0c;微软的多项核心云服务&#xff0c;包括身份验证平台Microsoft Entra、安全信息…

DAY25|回溯算法Part04|LeetCode:491.递增子序列、46.全排列、47.全排列 II

目录 LeetCode:491.递增子序列 基本思路 C代码 LeetCode:46.全排列 基本思路 C代码 LeetCode:47.全排列 II 基本思路 C代码 LeetCode:491.递增子序列 力扣代码链接 文字讲解&#xff1a;LeetCode:491.递增子序列 视频讲解&#xff1a;回溯算法精讲&#xff0c;树层去重…

React融合css

单纯使用tsx文件生成的页面比较单一&#xff0c;可以考虑结合css进行使用&#xff0c;需要说明的是&#xff0c;本人水平有限&#xff0c;仅对接触过的几种方式进行说明 内联样式 内联样式也有多种写法&#xff0c;此处仅列举两种比较简单的写法 写法一 import React from …

网络安全-蓝队基础

声明 学习视频来自 B 站UP主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 ✍&#x1f3fb;作者简介&#xff1a;致…

CentOS下如何安装Nginx

1、下载nginx 官方网站 http://nginx.org 下载链接&#xff1a;http://nginx.org/download/ 下载完成后的安装包&#xff1a; 2、使用解压命令进行解压 tar -zxvf nginx-1.13.7.tar.gz3、在安装所需的安装环境 安装gcc环境 yum install gcc-c安装第三方开发包 - PCRE(P…

OpenEuler 下 Docker 安装、配置与测试实例

文章目录 前言1. 环境准备2. 下载 Docker3.配置服务文件4.配置加速器加速下载docker镜像5. 验证 Docker 安装 前言 Docker 安装大致分为包管理器安装、脚本安装、离线手动安装、容器编排工具安装、桌面版安装等&#xff0c;每种安装各有特点&#xff0c;但涉及知识面不少&…

导航栏小案例

实现类似于这样的效果 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>导航栏</title><style>*{margin: 0;padding: 0;}.div1{width: 100%;height: 60px;/* border: 1px solid blue; */background-color:rgb(…

Spring Boot中的自动装配机制

文章目录 1. 什么是自动装配&#xff1f;2. 自动装配是如何工作的&#xff1f;3. 如何开启自动装配&#xff1f;4. 自动装配的注意事项5. 结语推荐阅读文章 在Spring Boot的世界里&#xff0c;自动装配&#xff08;Auto-configuration&#xff09;就像春风拂面&#xff0c;轻轻…