当前位置: 首页 > 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;或者对象被销毁…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...