uniapp 设置安全区域

news/2024/11/14 3:27:34/
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/news/1546822.html

相关文章

Python用CEEMDAN-LSTM-VMD金融股价数据预测及SVR、AR、HAR对比可视化

全文链接&#xff1a;https://tecdat.cn/?p38224 分析师&#xff1a;Duqiao Han 股票市场是一个复杂的非线性系统&#xff0c;股价受到许多经济和社会因素的影响。因此&#xff0c;传统的线性或近线性预测模型很难有效、准确地预测股票指数的价格趋势。众所周知&#xff0c;深…

linux命令详解,存储管理相关

存储管理 一、内存使用量&#xff0c;free free 命令是一个用于显示系统中物理内存&#xff08;RAM&#xff09;和交换空间&#xff08;swap&#xff09;使用情况的工具 free -m free -m -s 5参数 -b 功能: 以字节&#xff08;bytes&#xff09;为单位显示内存使用情况。说…

phpcms-tree(PHP无限级别分类)

phpcms-tree&#xff0c;是一个从PHPCMS v9最新版中提取出来的无限级别分类的源码&#xff0c;可以整合到任何项目中。 使用方法 参考Src/index.php里的实例。 源码下载&#xff1a; 支持本程序&#xff0c;请到Gitee和GitHub给我们点Star&#xff01; Gitee&#xff1a;p…

使用纯HTML和CSS绘制圣诞树:打造网页中的冬日奇景

### HTML & CSS 实现节日圣诞树&#xff1a;一步步打造你的冬季主题网页 在这篇文章中&#xff0c;我们将使用纯HTML和CSS创建一棵节日圣诞树。通过简单的代码&#xff0c;您可以在网页上实现一棵带有星星、彩球装饰的圣诞树&#xff0c;为网站增添节日氛围。 ### 实现思…

SwiftUI开发教程系列 - 第1章:简介与环境配置

1.1 SwiftUI简介 SwiftUI 是 Apple 于 2019 年推出的声明式用户界面框架&#xff0c;旨在简化 iOS、macOS、watchOS 和 tvOS 应用的 UI 开发。与 UIKit 的命令式编程方式不同&#xff0c;SwiftUI 提供了一种声明式语法&#xff0c;让开发者可以以更加直观、简洁的方式构建 UI。…

ue5 蓝图学习(一)结构体的使用

在内容浏览器中右键 蓝图-选择结构体 下面这东西就是结构体&#xff0c;和C的结构体差不多 双击一下 可以添加变量&#xff0c;设置变量的类型和默认值。 可以在关卡蓝图中调用它。 点击打开关卡蓝图&#xff0c;添加变量 在变量的右侧&#xff0c;变量类型里搜索strcut&#…

金价大跌,特朗普胜选或成导火索

黄金光芒不再&#xff0c;美元强势崛起 上周特朗普赢得美国总统选举后&#xff0c;金价出现了大幅下跌。这标志着市场情绪正在发生转变&#xff0c;投资者开始从避险资产转向风险资产。 为何金价会下跌&#xff1f; 美元走强&#xff1a; 特朗普的胜选提振了美元&#xff0c;…

机器视觉基础—双目相机

机器视觉基础—双目相机与立体视觉 双目相机概念与测量原理 我们多视几何的基础就在于是需要不同的相机拍摄的同一个物体的视场是由重合的区域的。通过下面的这种几何模型的目的是要得到估计物体的长度&#xff0c;或者说是离这个相机的距离。&#xff08;深度信息&#xff09…