当前位置: 首页 > news >正文

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 如何自定义导航栏并自适应机型

如今的移动设备有各种不同的屏幕形状&#xff0c;如刘海屏、水滴屏等。这些异形屏会影响页面的布局&#xff0c;尤其是导航栏和底部栏的显示。通过获取安全区域信息&#xff0c;可以确保页面内容不会被异形屏的特殊区域遮挡。 在设计页面顶部导航栏时&#xff0c;可以根据 saf…...

Java高级Day43-类加载

117.类加载 静态和动态加载 反射机制是java实现动态语言的关键&#xff0c;也就是通过反射实现类动态加载 静态加载&#xff1a;编译时加载相关的类&#xff0c;如果没有则报错&#xff0c;依赖性太强 动态加载&#xff1a;运行时加载需要的类&#xff0c;如果运行时不用该类…...

【LeetCode 算法笔记】155. 最小栈

目录 问题描述单个栈实现双栈实现不开辟额外空间 问题描述 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。 void push(int val) 将元素val推入堆栈。 void pop()…...

面试题 05.01. 插入

目录 一&#xff1a;题目&#xff1a; 二&#xff1a;代码&#xff1a; 三&#xff1a;结果&#xff1a; 一&#xff1a;题目&#xff1a; 给定两个整型数字 N 与 M&#xff0c;以及表示比特位置的 i 与 j&#xff08;i < j&#xff0c;且从 0 位开始计算&#xff09;。…...

稠密向量检索、稀疏向量检索、BM25检索三者对比

在当今的信息检索领域&#xff0c;随着人工智能和自然语言处理技术的发展&#xff0c;稠密向量检索和稀疏向量检索成为了两种主要的研究方向。稠密向量检索依托于高维空间中的向量表示&#xff0c;能够捕捉文档的深层语义信息&#xff0c;而稀疏向量检索则侧重于关键词的匹配&a…...

UEFI学习笔记(六):EDK II 模块:Libraries,DriversApplication

UEFI学习笔记&#xff08;六&#xff09;&#xff1a;EDK II Modules&#xff1a;Libraries&#xff0c;Application&Drivers 一、模块&#xff08;Modules&#xff09;的概念1、Library模块2、Application模块3、Driver模块4、Application和Driver的区别 二、EDK II 实现U…...

详解 Pandas 的透视表函数

Pandas 的透视表函数主要为 pivot() 和 pivot_table()&#xff0c;主要的功能为对 DataFrame 的行和列进行重新组合来重塑数据。 一、pivot 函数 pivot 函数只能对数据进行重塑&#xff0c;不能进行聚合 1. 数据准备 import pandas as pddf1 pd.DataFrame({department_id: […...

基于python+django+vue的农业管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的农…...

动态内存管理之malloc,free,calloc和realloc函数

Hello&#xff0c;各位小伙伴们&#xff0c;小编在这里祝福各位中秋佳节快乐呀&#xff0c;今天让我们来学习一下动态内存管理吧&#xff01; 引言 像我们之前在开辟一段空间的时候你可能会使用整型变量来申请一块空间&#xff0c;或者使用数组来申请一段连续的空间&#xff…...

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 打开&#xff0c;搜索文本 flag&#xff0c;加载所有。 flag 是 obj obj2&#xff0c;来自用户的用户名和密码。 Override // android.view.View.OnClickListenerpublic void onClick(View view) {St…...

ubuntu 22.04 ~24.04 如何修改登录背景

ubuntu 22.04 ~24.04 如何修改登录背景 背景&#xff1a;由于22.04 登录gdm的变更&#xff0c;之前的修改登录背景的方案已经无法使用。现在给大家分享新的使用方法&#xff1a; 1&#xff0c;下载如下路径的脚本&#xff1a; https://download.csdn.net/download/xdhyqd/89…...

Andrej Karpathy谈AI未来:自动驾驶、Transformer与人机融合

引言 在人工智能领域&#xff0c;Andrej Karpathy 是一个无法忽视的名字。从他早期在 OpenAI 的工作&#xff0c;到后来担任 Tesla 的 AI 主管&#xff0c;他在自动驾驶、深度学习等方面的贡献广为人知。最近&#xff0c;卡帕西做客了著名的播客节目 No Priors&#xff0c;他在…...

Vue使用query传参Boolean类型,刷新之后转换为String问题

做项目时发现第一次进入页面时传参是正常的Boolean类型&#xff0c;刷新之后变成了String&#xff0c;这是浏览器进行的一次强制转换&#xff1b; vue-router 传参&#xff0c;不管是 params 形式还是query形式传参&#xff0c;在页面刷新后&#xff0c;params 和 query 对象中…...

开源模型应用落地-qwen模型小试-调用Qwen2-VL-7B-Instruct-更清晰地看世界(一)

一、前言 学习Qwen2-VL ,为我们打开了一扇通往先进人工智能技术的大门。让我们能够深入了解当今最前沿的视觉语言模型的工作原理和强大能力。这不仅拓宽了我们的知识视野,更让我们站在科技发展的潮头,紧跟时代的步伐。 Qwen2-VL 具有卓越的图像和视频理解能力,以及多语言支…...

国学盛典 致敬先贤 《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕

9月10日&#xff0c;《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕。中国著名表演艺术家、曾饰演央视86版电视剧《西游记》中“孙悟空”的六小龄童先生与两百余人传统文化传播者、践行者、爱好者齐聚一堂&#xff0c;共同交流。本次会议由中国文化促进会福文化工作委…...

sqlgun新闻管理系统

一&#xff0c;打开主页 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&#xff0c;也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用&#xff0c;底层又是怎么运作的呢&#xff0c;首先一起看一下 useState 。 问题&#xff1a;Hook 是什么? 一个 Hook 就是…...

C/C++:优选算法(持续更新~~)

一、双指针 1.1移动零 链接&#xff1a;283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操…...

【qt信号槽-6】槽函数不执行的一种原因——未知线程

背景&#xff1a; 项目需要调用第三方库&#xff0c;又要涉及多线程&#xff0c;遇到了在connect成功之后&#xff0c;槽函数依然不执行的情况。按照常理&#xff0c;槽函数不执行无非就几种情况&#xff1a; 要么connect未成功。 要么disconnect&#xff0c;或者对象被销毁…...

中医AI革命:如何用70亿参数模型破解千年诊疗难题

中医AI革命&#xff1a;如何用70亿参数模型破解千年诊疗难题 【免费下载链接】CMLM-ZhongJing 首个中医大语言模型——“仲景”。受古代中医学巨匠张仲景深邃智慧启迪&#xff0c;专为传统中医领域打造的预训练大语言模型。 The first-ever Traditional Chinese Medicine large…...

告别传统方法:LogAnomaly如何用NLP技术提升日志异常检测准确率?

告别传统方法&#xff1a;LogAnomaly如何用NLP技术重构日志异常检测范式&#xff1f; 日志数据如同数字世界的神经系统&#xff0c;记录着系统运行的每一次"心跳"与"呼吸"。传统检测方法就像拿着放大镜寻找心电图异常&#xff0c;而LogAnomaly则带来了全新…...

PWM技术原理与工程实践全解析

1. PWM技术基础解析脉冲宽度调制&#xff08;PWM&#xff09;作为现代电子电力控制的核心技术&#xff0c;其本质是通过调节脉冲信号的导通时间比例来实现对功率的有效控制。我第一次接触这个概念是在调试直流电机调速项目时&#xff0c;当时被其精妙的设计思想所震撼。1.1 关键…...

OpenClaw多模态聊天机器人:Qwen2.5-VL-7B实现图片问答与表情包生成

OpenClaw多模态聊天机器人&#xff1a;Qwen2.5-VL-7B实现图片问答与表情包生成 1. 为什么选择OpenClaw构建多模态聊天机器人 去年我在运营一个技术社群时&#xff0c;经常遇到群成员发截图提问的场景。传统聊天机器人要么只能处理文字&#xff0c;要么需要将图片上传到第三方…...

STM32开发中的C语言核心技巧与实战

1. STM32开发中的C语言核心技巧解析从事嵌入式开发十多年来&#xff0c;我深刻体会到C语言在STM32单片机开发中的核心地位。与通用计算机编程不同&#xff0c;嵌入式C语言需要直接操作硬件寄存器&#xff0c;对代码的精确性和效率要求极高。下面我将分享几个在STM32开发中最实用…...

STM32除零运算不崩溃的机制与配置解析

1. STM32单片机除零运算不崩溃的底层机制解析 在嵌入式开发领域&#xff0c;STM32系列单片机因其出色的性能和丰富的外设资源而广受欢迎。许多从传统PC平台转向嵌入式开发的工程师都会发现一个有趣的现象&#xff1a;在STM32上执行除零操作时&#xff0c;程序竟然不会像在PC上那…...

基于MATLAB/Simulink的双馈异步感应发电机直接功率控制仿真探索

Direct_Power_Control_of_DFIG&#xff1a;基于MATLAB/Simulink的双馈异步感应发电机的直接功率控制仿真模型 仿真条件&#xff1a;MATLAB/Simulink R2015b在电力系统研究领域&#xff0c;双馈异步感应发电机&#xff08;DFIG&#xff09;因其独特的性能优势而备受关注。直接功…...

基于Maxwell的750W内转子伺服电机设计:14极12槽优化方案解析

基于maxwwell设计的经典750W&#xff0c;3000RPM 内转子 私服电机&#xff0c;14极12槽&#xff0c;外径76 轴向长度56.7 &#xff0c;转矩1Nm,直流母线12V&#xff0c;辅助槽优化了齿槽转矩&#xff0c;特色是转子加工方便&#xff0c;永磁同步电机&#xff08;PMSM BLDC&…...

告别水印烦恼!3步轻松去水印,新手秒上手。

找到心仪的图片有水印、做设计好不容易找到的素材有水印、下载好看的壁纸有水印&#xff0c;遇到的好图全被水印扫兴&#xff1f;PS去水印&#xff0c;操作复杂&#xff0c;学习成本高&#xff0c;浪费时间&#xff1b;用专业去水印工具&#xff0c;收费昂贵&#xff0c;还有广…...

MStar-Bin-Tool-Master中文版|晨星芯片BIN固件解包/封包工具(适配机顶盒与智能电视)

温馨提示&#xff1a;文末有联系方式工具简介 MStar-Bin-Tool-Master中文增强版是一款专为晨星&#xff08;MStar&#xff09;系列主控芯片设计的固件解析与重构工具&#xff0c;全面支持主流机顶盒与智能液晶电视所用BIN格式刷机包&#xff0c;提供直观易用的图形化操作界面&a…...