uniapp 如何自定义导航栏并自适应机型
如今的移动设备有各种不同的屏幕形状,如刘海屏、水滴屏等。这些异形屏会影响页面的布局,尤其是导航栏和底部栏的显示。通过获取安全区域信息,可以确保页面内容不会被异形屏的特殊区域遮挡。
在设计页面顶部导航栏时,可以根据 safeAreaInsets.top 的值来调整导航栏的位置,使其在不同设备上都能正确显示,避免被刘海区域遮挡。
例如iPhone14Pro max机型,就被挡住了!!!

解决方法如下:
1、在page.json里面配置"navigationStyle": "custom" ——导航栏自定义
{"path": "pages/index/index","style": {"navigationBarTitleText": "首页",//使用自定义导航栏"navigationStyle": "custom","navigationBarTextStyle": "white"}},
2、设计自定义导航栏布局
<template><view class="navbar"><!-- logo文字 --><view class="logo"><image class="logo-image" src="@/static/images/logo.png"></image><text class="logo-text">新鲜 · 亲民 · 快捷</text></view><!-- 搜索条 --><view class="search"><text class="icon-search">搜索商品</text><text class="icon-scan"></text></view></view>
</template>
3、适配不同机型
获取各机型信息
<script setup lang="ts">
//获取屏幕边界到安全区域的距离
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets);
</script>
动态设置样式::style="{ paddingTop: safeAreaInsets?.top + 'px' }"
<template><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><!-- logo文字 --><view class="logo"><image class="logo-image" src="@/static/images/logo.png"></image><text class="logo-text">新鲜 · 亲民 · 快捷</text></view><!-- 搜索条 --><view class="search"><text class="icon-search">搜索商品</text><text class="icon-scan"></text></view></view>
</template>
设置完之后就不会挡住啦!!!!

相关文章:
uniapp 如何自定义导航栏并自适应机型
如今的移动设备有各种不同的屏幕形状,如刘海屏、水滴屏等。这些异形屏会影响页面的布局,尤其是导航栏和底部栏的显示。通过获取安全区域信息,可以确保页面内容不会被异形屏的特殊区域遮挡。 在设计页面顶部导航栏时,可以根据 saf…...
Java高级Day43-类加载
117.类加载 静态和动态加载 反射机制是java实现动态语言的关键,也就是通过反射实现类动态加载 静态加载:编译时加载相关的类,如果没有则报错,依赖性太强 动态加载:运行时加载需要的类,如果运行时不用该类…...
【LeetCode 算法笔记】155. 最小栈
目录 问题描述单个栈实现双栈实现不开辟额外空间 问题描述 设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。 void push(int val) 将元素val推入堆栈。 void pop()…...
面试题 05.01. 插入
目录 一:题目: 二:代码: 三:结果: 一:题目: 给定两个整型数字 N 与 M,以及表示比特位置的 i 与 j(i < j,且从 0 位开始计算)。…...
稠密向量检索、稀疏向量检索、BM25检索三者对比
在当今的信息检索领域,随着人工智能和自然语言处理技术的发展,稠密向量检索和稀疏向量检索成为了两种主要的研究方向。稠密向量检索依托于高维空间中的向量表示,能够捕捉文档的深层语义信息,而稀疏向量检索则侧重于关键词的匹配&a…...
UEFI学习笔记(六):EDK II 模块:Libraries,DriversApplication
UEFI学习笔记(六):EDK II Modules:Libraries,Application&Drivers 一、模块(Modules)的概念1、Library模块2、Application模块3、Driver模块4、Application和Driver的区别 二、EDK II 实现U…...
详解 Pandas 的透视表函数
Pandas 的透视表函数主要为 pivot() 和 pivot_table(),主要的功能为对 DataFrame 的行和列进行重新组合来重塑数据。 一、pivot 函数 pivot 函数只能对数据进行重塑,不能进行聚合 1. 数据准备 import pandas as pddf1 pd.DataFrame({department_id: […...
基于python+django+vue的农业管理系统
作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的农…...
动态内存管理之malloc,free,calloc和realloc函数
Hello,各位小伙伴们,小编在这里祝福各位中秋佳节快乐呀,今天让我们来学习一下动态内存管理吧! 引言 像我们之前在开辟一段空间的时候你可能会使用整型变量来申请一块空间,或者使用数组来申请一段连续的空间ÿ…...
Android 13 固定systemUI的状态栏为黑底白字,不能被系统应用或者三方应用修改
目录 一.背景 二.思路 三.代码流程 1.colos.xml自定义颜色 2.设置状态栏的背景颜色 3.对View进行操作 ①.对Clock(状态栏左侧的数字时钟)进行操作 ②.对电池(BatteryMeterView)进行操作 4.锁屏状态栏 5.patch汇总 一.背景 客户需求将状态栏固定成黑底白字,并且不能让系…...
【CTF Reverse】XCTF GFSJ1092 easyEZbaby_app Writeup(Android+逆向工程+Java)
easyEZbaby_app 究极简单的安卓逆向 解法 得到一个 apk 安装包。 用 jadx 打开,搜索文本 flag,加载所有。 flag 是 obj obj2,来自用户的用户名和密码。 Override // android.view.View.OnClickListenerpublic void onClick(View view) {St…...
ubuntu 22.04 ~24.04 如何修改登录背景
ubuntu 22.04 ~24.04 如何修改登录背景 背景:由于22.04 登录gdm的变更,之前的修改登录背景的方案已经无法使用。现在给大家分享新的使用方法: 1,下载如下路径的脚本: https://download.csdn.net/download/xdhyqd/89…...
Andrej Karpathy谈AI未来:自动驾驶、Transformer与人机融合
引言 在人工智能领域,Andrej Karpathy 是一个无法忽视的名字。从他早期在 OpenAI 的工作,到后来担任 Tesla 的 AI 主管,他在自动驾驶、深度学习等方面的贡献广为人知。最近,卡帕西做客了著名的播客节目 No Priors,他在…...
Vue使用query传参Boolean类型,刷新之后转换为String问题
做项目时发现第一次进入页面时传参是正常的Boolean类型,刷新之后变成了String,这是浏览器进行的一次强制转换; vue-router 传参,不管是 params 形式还是query形式传参,在页面刷新后,params 和 query 对象中…...
开源模型应用落地-qwen模型小试-调用Qwen2-VL-7B-Instruct-更清晰地看世界(一)
一、前言 学习Qwen2-VL ,为我们打开了一扇通往先进人工智能技术的大门。让我们能够深入了解当今最前沿的视觉语言模型的工作原理和强大能力。这不仅拓宽了我们的知识视野,更让我们站在科技发展的潮头,紧跟时代的步伐。 Qwen2-VL 具有卓越的图像和视频理解能力,以及多语言支…...
国学盛典 致敬先贤 《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕
9月10日,《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕。中国著名表演艺术家、曾饰演央视86版电视剧《西游记》中“孙悟空”的六小龄童先生与两百余人传统文化传播者、践行者、爱好者齐聚一堂,共同交流。本次会议由中国文化促进会福文化工作委…...
sqlgun新闻管理系统
一,打开主页 1.输入框测试回显点 -1union select 1,2,3# 出现回显点2 2.查看数据库表名 -1union select 1,database(),3# 3.查看表名 -1union select 1,2,group_concat(table_name) from information_schema.tables where table_schemasqlgunnews# 4.查看admin中…...
react hooks--useState
概述 useState 可以使函数组件像类组件一样拥有 state,也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用,底层又是怎么运作的呢,首先一起看一下 useState 。 问题:Hook 是什么? 一个 Hook 就是…...
C/C++:优选算法(持续更新~~)
一、双指针 1.1移动零 链接:283. 移动零 - 力扣(LeetCode) 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。请注意 ,必须在不复制数组的情况下原地对数组进行操…...
【qt信号槽-6】槽函数不执行的一种原因——未知线程
背景: 项目需要调用第三方库,又要涉及多线程,遇到了在connect成功之后,槽函数依然不执行的情况。按照常理,槽函数不执行无非就几种情况: 要么connect未成功。 要么disconnect,或者对象被销毁…...
Claude Code与李慕婉-仙逆-造相Z-Turbo协同工作流:AI编程辅助图像生成任务
Claude Code与李慕婉-仙逆-造相Z-Turbo协同工作流:AI编程辅助图像生成任务 你有没有过这样的经历?脑子里突然冒出一个绝妙的画面,想把它画出来,却发现自己既不会画画,也不懂那些复杂的图像生成工具。或者,…...
OpenClaw小龙虾初体验【安装学习】
文章目录一、前言二、安装三、360安全龙虾四、腾讯龙虾4.1 文件移动4.2 应用分析4.3 Docker失败原因一、前言 最近小龙虾很火,不禁能说还能做,本质就类似木马,获取电脑权限,不禁能操作各应用还能联动外接设备。 那肯定要学习一下…...
AI人体骨骼关键点检测:5分钟快速部署,33个关节点一键可视化
AI人体骨骼关键点检测:5分钟快速部署,33个关节点一键可视化 1. 引言:快速体验人体姿态检测 人体骨骼关键点检测技术正在改变我们与计算机交互的方式。想象一下,你的电脑能够实时理解你的每一个动作——从简单的举手到复杂的舞蹈…...
从生活沟通到AI对话:写好提示词,用好AI的魔法钥匙
一个顿悟:从复杂技术到简单提示最近与一位从事软件开发的朋友交流,他提出了一个颇具启发性的构想:将软件的售后客服工作交给AI来处理。起初,他的思路充满了技术复杂性——计划向AI提供核心代码库、训练一个专属的客服模型、进行深…...
Electron 14+ 开发必看:WebContentsView 实战指南(含与 BrowserView 对比)
Electron 14 开发实战:WebContentsView 深度解析与性能优化 如果你正在使用 Electron 14 开发跨平台桌面应用,那么 WebContentsView 绝对是你需要重点掌握的核心组件。作为 Electron 团队在 14 版本引入的全新视图系统,WebContentsView 不仅解…...
当SPC焕发新生:云质信息重构制造质量管理新范式
传统SPC:那些让人头疼的“老毛病”说实话,很多企业斥巨资引入的SPC软件,实际使用体验与高级版Excel相差无几。数据需手动导入,图表需逐一点选生成,想要进行跨维度分析,更是要先将数据导出,借助其…...
MySQL 事务与并发控制:从日志底层到 MVCC 哲学
MySQL 事务与并发控制:从日志底层到 MVCC 哲学 文章目录 MySQL 事务与并发控制:从日志底层到 MVCC 哲学📚 课程大纲规划 📖 第一讲:基础——事务概念与隔离级别1. 🎭 并发带来的三大“幽灵”👻 …...
前端开发者的福音:5分钟用Mergely.js给你的网页加个在线文本对比器
零成本打造专业级文本对比工具:Mergely.js全攻略 在代码审查、合同修订或是配置管理场景中,文本差异对比是个高频刚需。传统方案要么需要后端支持,要么功能简陋。现在,只需5分钟和几行JavaScript代码,你就能为Web项目嵌…...
从芯片设计到产线测试:深入浅出聊聊DFT中的SCAN链设计与JTAG标准(含IEEE 1149.1)
从芯片设计到产线测试:深入浅出聊聊DFT中的SCAN链设计与JTAG标准(含IEEE 1149.1) 在芯片设计领域,可测试性设计(DFT)早已从"锦上添花"变成了"不可或缺"的核心环节。想象一下࿰…...
Pixel Epic智识终端效果展示:跨领域研报生成一致性与专业性验证
Pixel Epic智识终端效果展示:跨领域研报生成一致性与专业性验证 1. 产品概览与核心价值 Pixel Epic智识终端是一款基于AgentCPM-Report大模型构建的专业研究报告生成工具。与传统AI工具不同,它创新性地采用了像素RPG游戏的美学设计,将枯燥的…...
