uniapp 设置安全区域

embedded/2024/11/13 16:10:03/
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/embedded/137288.html

相关文章

[经典] 前端js将文件流导出为csv/excel文件

前端将文件流导出为csv/excel文件有两种方式&#xff1a; 1.后端直接返回文件连接&#xff1a; 前端正常请求&#xff0c;后端返回一个静态文件链接&#xff0c;直接使用&#xff1a; window.location.href url 简单&#xff0c;但是缺点是耗资源&#xff0c;后端需要把数据转…

大数据-218 Prometheus 插件 exporter 与 pushgateway 配置使用 监控服务 使用场景

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

云原生安全解决方案NeuVector 5.X部署实践

云原生安全解决方案NeuVector 5.X部署实践 NeuVector 5.X支持部署到docker、Rancher、Openshift以及各种公有云平台的Kubernetes集群环境上&#xff0c;支持YAML、Operator、helm等安装方式。本文实践在本地Kubernetes集群上部署NeuVector 5.X。 1. 部署方式概述 YAML方式部…

【前端】JavaScript高级教程:线程机制与事件机制

文章目录 1 进程与线程2 浏览器内核3 定时器引发的思考4 JS是单线程的5 事件循环模型6 H5 Web Workers6.1 Web Workers_测试16.2 worker.js6.3 Web Workers_测试2 1 进程与线程 进程&#xff1a;程序的一次执行&#xff0c;它占有一片独有的内存空间。线程&#xff1a;CPU的基…

Unity3D UI 双击和长按

Unity3D 实现 UI 元素双击和长按功能。 UI 双击和长按 上一篇文章实现了拖拽接口&#xff0c;这篇文章来实现 UI 的双击和长按。 双击 创建脚本 UIDoubleClick.cs&#xff0c;创建一个 Image&#xff0c;并把脚本挂载到它身上。 在脚本中&#xff0c;继承 IPointerClickHa…

第二章springboot核心配置与注解

本章学习的目标 2.1 全局配置文件 全局配置文件能对默认配置值进行修改&#xff0c;下面介绍两种全局配置文件&#xff1a; 2.1.1 application.properties配置文件 springboot项目启动时会自动启动这个配置文件&#xff0c;我们可以在这个文件中配置相关属性&#xff0c;&…

minio 分布式

方案设计 需要5台服务器&#xff0c;一台nginx用作分发请求&#xff0c;4台minio服务器&#xff0c;每个minio服务器上至少2个盘。在这个方法中&#xff0c;我使用了lvm的缓存&#xff0c;在同种固态盘的情况下&#xff0c;可以使读性能提高数倍到十倍&#xff0c;使写性能提高…

音视频入门基础:MPEG2-TS专题(4)——使用工具分析MPEG2-TS传输流

一、引言 有很多工具可以分析MPEG2-TS文件/流&#xff0c;比如Elecard Stream Analyzer、PROMAX TS Analyser、easyice等。下面一一对它们进行简介&#xff08;个人感觉easyice功能更强大一点&#xff09;。 二、Elecard Stream Analyzer 使用Elecard Stream Analyzer工具可以…