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

uniapp实现自定义导航内容高度居中(兼容APP端以及小程序端与胶囊对齐)

①效果图如下

1.小程序端与胶囊对齐

2.APP端内容区域居中

 

 

注意:上面使用的是colorui里面的自定义导航样式。

②思路:

1.APP端和小程序端走不同的方法,因为小程序端要计算不同屏幕下右侧胶囊的高度。

2.其次最重要的要清晰App端和小程序端的计算逻辑。

3.然后调用api获取屏幕信息,小程序还需要单独调用获取胶囊的api。

系统信息uni.getSystemInfoSync()

小程序端胶囊信息uni.getSystemInfoSync

4.最后写公共的封装方法,在多个页面调用。

小程序端计算方法:

2.1.头部整体高度 ==状态栏高度 + 导航栏高度

2.2.导航栏高度 == (胶囊距顶部高度-状态栏高度) *2 +胶囊高度

2.3.计算导航内容距离顶部高度= 状态栏高度/2

APP端计算方法:

2.4.计算自定义导航栏的高度=((屏幕高度-状态栏高度)/需要除的比例)

③实现代码

3.1、封装的公共的方法APP端和小程序端

	/** 共用的自定义导航高度位置(App端)* 在页面中获取系统信息,并计算自定义导航栏的高度* comNum 计算除数* saveFloat 保留小数位数*/utilsNavbarHeight(screenH, statusH, comNum, saveFloat) {const screenHeight = screenH; // 屏幕高度const statusBarHeight = statusH; // 状态栏高度var saveFloats = 2if (saveFloat != undefined) {saveFloats = saveFloat}// 计算自定义导航栏的高度const navBarHeight = ((screenHeight - statusBarHeight) / comNum).toFixed(saveFloats); // 例如除以10,可以根据实际需求进行调整return navBarHeight},/**小程序端与胶囊平行*/WechatNavBarHeight() {//获取状态栏高度const statusBarHeight = uni.getSystemInfoSync().statusBarHeight//获取小程序胶囊信息const menu = uni.getMenuButtonBoundingClientRect()//导航栏高度 == (胶囊距顶部高度-状态栏高度) *2 +胶囊高度const navBarHeightWechat = (menu.top - statusBarHeight) * 2 + menu.height//头部整体高度 ==状态栏高度 + 导航栏高度const headerHeight = statusBarHeight + navBarHeightWechat//计算导航内容距离顶部高度= 状态栏高度/2const topHeight = statusBarHeight / 2 + 'px'return {topHeight,headerHeight}},

3.2、使用自定义导航栏页面调用

注意:height动态绑定的是navBarHeight,整体导航栏高度

           top动态邦定的是statusBarHeight,计算后的距顶部高度

//布局
<view class="Content"><!-- 自定义导航 --><view class="navbar"><view class="cu-bar bg-blue search" :style="{'height':navBarHeight}"><view class="rowList" :style="{'top':statusBarHeight}"><view class="action" @click="loca"><text>测试</text><text class="cuIcon-triangledownfill"></text></view><view :class="[isWeixin?'search-form radius wechatNavbar':'search-form radius']"><text class="cuIcon-search"></text><input @tap.stop="InputFocus" :disabled="true" :adjust-position="false" type="text":placeholder="currentWord" confirm-type="search"></input></view><view class="cu-avatar round" @click="addFunction":style="isWeixin ? 'background-image:url(static/images/index/add.png)' : 'background-image:url(/static/images/index/add.png)'"></view></view></view></view>
//初始化数据navBarHeight: null,//导航栏高度statusBarHeight: null,//导航内容距离整体导航栏高度headerHeight: null, //顶部导航整体高度//方法
//计算导航栏高度comNavbarHeight() {// #ifdef APP-PLUSconst devres = this.$system.devInfo()const navBarHeight = this.$system.utilsNavbarHeight(devres.screenHeight, devres.statusBarHeight, 8.6, 2)this.navBarHeight = navBarHeight + 'px'this.statusBarHeight = devres.statusBarHeight / 2 + 'px' //14% 准确来说14%this.headerHeight = navBarHeight// #endif// #ifdef MP-WEIXINconst wechatObj = this.$system.WechatNavBarHeight()this.statusBarHeight = wechatObj.topHeightthis.navBarHeight = wechatObj.headerHeight + 'px'this.headerHeight = wechatObj.headerHeight// #endif},

这样就可以了,实现过程中也踩了很多坑,有什么问题评论区留言啊!

相关文章:

uniapp实现自定义导航内容高度居中(兼容APP端以及小程序端与胶囊对齐)

①效果图如下 1.小程序端与胶囊对齐 2.APP端内容区域居中 注意&#xff1a;上面使用的是colorui里面的自定义导航样式。 ②思路&#xff1a; 1.APP端和小程序端走不同的方法&#xff0c;因为小程序端要计算不同屏幕下右侧胶囊的高度。 2.其次最重要的要清晰App端和小程序端…...

Python调用外部电商API的详细步骤

Python是一种高级编程语言&#xff0c;非常适合用于集成API&#xff0c;即应用程序编程接口。API通常是由网站和各种软件提供的接口&#xff0c;可以让不同的程序之间进行数据交换和通信。在Python中调用API&#xff0c;可以帮助我们轻松地获取数据&#xff0c;并将其整合到我们…...

什么是NVME

1. 概念 NVM Express&#xff08;NVMe&#xff09;&#xff0c;或称非易失性内存主机控制器接口规范(Non-Volatile Memory express),&#xff0c;是一个逻辑设备接口规范。他是与AHCI类似的、基于设备逻辑接口的总线传输协议规范&#xff08;相当于通讯协议中的应用层&#xf…...

交叉编译驱动和应用出现警告提示错误“cc1:all warnings being treated as errors”解决方法

最近新玩的rk3588的板子,编译驱动时出现了警告提示错误“cc1:all warnings being treated as errors”,导致编译失败,仔细看了一下,就是内部出现了一个警告,一个未使用的变量出现的警告,导致了驱动编译失败,但是如果这样其他驱动会不会也这样,然后就写了一个printk的de…...

基于nodejs+vue+uniapp微信小程序的短视频分享系统

开发语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;VScode 3.1小程序端 用户注册页面&#xff0c;输入用户的个人信息点击注册即可。 注册完成后会返回到登录页面&#xff0c;用户输入自己注…...

ElasticSearch:环境搭建步骤

1、拉取镜像 docker pull elasticsearch:7.4.0 2、创建容器 docker run -id --name elasticsearch -d --restartalways -p 9200:9200 -p 9300:9300 -v /usr/share/elasticsearch/plugins:/usr/share/elasticsearch/plugins -e "discovery.typesingle-node" elasti…...

剑指 Offer 37. 序列化二叉树

文章目录 题目描述简化题目思路分析 题目描述 请实现两个函数&#xff0c;分别用来序列化和反序列化二叉树。 你需要设计一个算法来实现二叉树的序列化与反序列化。这里不限定你的序列 / 反序列化算法执行逻辑&#xff0c;你只需要保证一个二叉树可以被序列化为一个字符串并且将…...

如何快速完成MySQL数据的差异对比|NineData

在现代商业环境中&#xff0c;数据库是企业存储核心数据的重要工具&#xff0c;而 MySQL 作为最受欢迎的关系型数据库管理系统&#xff0c;广泛应用于各行各业。在容灾、数据迁移、备份恢复等场景下&#xff0c;为了确保两端或多端之间数据的一致性&#xff0c;通常需要对数据进…...

Vue3项目中将html元素转换为word

下载插件 html转word插件 pnpm i --save html-docx-js-typescript生成临时链接 pnpm i file-saver代码部分 html部分&#xff0c;为要下载的部分用id做唯一标识 <div :id"mode-${chart.id}"><pre><VueShowdown :markdown"chart.content&quo…...

Unity-Shader-高亮Highlight

常用Shader-高亮&#xff0c;可动态调整高亮颜色、高亮强度范围/等级、高亮闪烁速度、高亮状态 Shader "CustomShader/Highlight" {Properties{_Color("Color", Color) (0.9044118,0.6640914,0.03325041,0)_Albedo("Albedo", 2D) "white…...

Linux操作系统(二):操作系统结构与内核设计

在&#xff08;一&#xff09;详解CPU中介绍了操作系统所基于的硬件CPU后&#xff0c;本部分学习操作系统的架构。在计算机系统中&#xff0c;操作系统的架构通常包括以下几个主要组件&#xff1a; 内核&#xff08;Kernel&#xff09; 进程管理&#xff08;Process Management…...

小研究 - 领域驱动设计DDD在IT企业内部网站开发中的运用(二)

在企业内部网站的建设过程中&#xff0c;网站后端最初采用传统的表模式的开发方式。这种方式极易导致站点的核心业务逻辑和业务规则分布在架构的各个层和对象中&#xff0c;这使得系统业务逻辑的复用性不高。为了解决这个问题&#xff0c;作者在后期的开发过程中引入了领域驱动…...

在Qt中实现鼠标监听与交互

文章目录 概述1. 包含头文件2. 实现鼠标事件函数3. 使用示例4. 应用场景 概述 鼠标监听是在Qt应用程序中实现用户交互的关键部分之一。通过捕获鼠标事件&#xff0c;您可以响应用户的点击、移动和释放动作&#xff0c;实现各种交互效果。本篇博文将详细介绍在Qt中如何进行鼠标…...

力扣hot100刷题记录

二刷hot100&#xff0c;坚持每天打卡&#xff01;&#xff01;&#xff01; 1. 两数之和 // 先求差&#xff0c;再查哈希表 public int[] twoSum(int[] nums, int target) {Map<Integer,Integer> map new HashMap<>();for(int i 0;i<nums.length;i){int key …...

阿里云国际站视频直播服务是什么呢?

阿里云国际站视频直播是什么呢&#xff1f;下面一起来看一下&#xff1a; 视频直播服务&#xff08;ApsaraVideo Live&#xff09;是基于前瞻的内容接入、分发网络和大规模分布式实时转码技术打造的音视频直播平台&#xff0c;提供便捷接入、高清流畅、超低延时、高并发的音视频…...

python实现简单的爬虫功能

前言 Python是一种广泛应用于爬虫的高级编程语言&#xff0c;它提供了许多强大的库和框架&#xff0c;可以轻松地创建自己的爬虫程序。在本文中&#xff0c;我们将介绍如何使用Python实现简单的爬虫功能&#xff0c;并提供相关的代码实例。 如何实现简单的爬虫 1. 导入必要的…...

AI文档识别技术之表格识别 (一)

AI文档识别技术之表格识别(一) 文章目录 文章目录 AI文档识别技术之表格识别(一)1. 表格识别原理介绍1.1 表格类型分类1.2 识别原理 2. 整体识别流程2.1 流程图2.2 图像处理部分大致流程 3. 将表格转换为html与json格式输出3.1 html格式3.2 json格式3.3 表格识别实例 前言 此文…...

uni-app 支持 app端, h5端,微信小程序端 图片转换文件格式 和 base64

uni-app 支持 app端 h5端&#xff0c;微信小程序端 图片转换文件格式 和 base64&#xff0c;下方是插件市场的地址app端 h5端&#xff0c;微信小程序端 图片转换文件格式 和 base64 - DCloud 插件市场 https://ext.dcloud.net.cn/plugin?id13926...

云计算——存储虚拟化简介 与 存储模式及方法

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 前期回顾 前言 一.存储虚拟化介绍 1.云计算存储基本概念 2.云计算存储模型 3.创…...

数据资产目录建设之数据分类全解

01 数据治理“洗澡论” 其实他们之前做过数据一轮数据资产盘点&#xff0c;做了一个分类&#xff0c;也挂到系统上了&#xff0c;但是后来就没有后来了。治理做一半&#xff0c;等于啥也没干。 我之前在群里开了一个玩笑&#xff0c;数据治理这种事情&#xff0c;就跟洗澡一…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...