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},

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/82987.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏 5秒内选择答案 项目下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198773

[RoarCTF 2019Online Proxy]sql巧妙盲注

文章目录 [RoarCTF 2019Online Proxy]sql巧妙盲注解题脚本脚本解析 [RoarCTF 2019Online Proxy]sql巧妙盲注 解题 在源代码界面发现&#xff1a;Current Ip 我们会联想到&#xff1a;X-Forwarded-For来修改ip&#xff1a; 结果我们发现&#xff0c;response会讲Last Ip回显出…

成集云 | 畅捷通采购单同步至钉钉 | 解决方案

源系统成集云目标系统 介绍 畅捷通是一家专业的金融科技公司&#xff0c;致力于为投资者提供便捷、高效的金融服务。通过畅捷通T的交易方式&#xff0c;投资者可以更加灵活地进行买卖交易&#xff0c;并且在交易完成后即可获得结算款项&#xff0c;无需等待T1的结算周期。 钉…

Webpack怎么使用?

Webpack 使用 前几篇文章中已经介绍了如何初始化包管理器 package.json 这里不再重复介绍&#xff0c;如有需要请查看 搭建工程化项目。 安装 :::warning 注意 请确保你已经安装了 yarn&#xff0c;如有需要请查看 搭建工程化开发环境。 ::: 通过命令 yarn add webpack web…

大数据技术之Hadoop:HDFS集群安装篇(三)

目录 分布式文件系统HDFS安装篇 一、为什么海量数据需要分布式存储 二、 分布式的基础架构分析 三、 HDFS的基础架构 四 HDFS集群环境部署 4.1 下载安装包 4.2 集群规划 4.3 上传解压 4.4 配置HDFS集群 4.5 准备数据目录 4.6 分发hadoop到其他服务器 4.7 配置环境变…

实例033 制作闪烁的窗体

实例说明 Windows系统中&#xff0c;当程序在后台运行时&#xff0c;如果某个窗口的提示信息需要用户浏览&#xff0c;该窗口就会不停的闪烁&#xff0c;这样就会吸引用户的注意。同样&#xff0c;如果在自己的程序中使某个窗口不停的闪烁就会吸引用户的注意。本例设计了一个闪…

设计模式之工厂模式

简单工厂 由一个工厂生产多个产品。 一般工厂 每个产品都有一个单独的工厂专门生产。 抽象工厂 不同工厂生产不同种类的产品&#xff0c;每个工厂生产的同类产品又可以再次分类。比如一个鼠标工厂和一个键盘工厂&#xff0c;他们可以为不同的品牌生产鼠标和键盘。

手写SpringCloud系列-一分钟理解微服务注册中心(Nacos)原理。

手写SpringCLoud项目地址&#xff0c;求个star github:https://github.com/huangjianguo2000/spring-cloud-lightweight gitee:https://gitee.com/huangjianguo2000/spring-cloud-lightweigh 一&#xff1a;什么是注册中心 1. 总结服务注册中心 我们可以理解注册中心就是一个…

Mermaid语法使用

Mermaid语法使用 1. 基础类1.1 流程图1.2 时序图 2. 工程图2.1 类图2.2 Git图 1. 基础类 1.1 流程图 graph TBid1(圆角矩形)--普通线-->id2[矩形];subgraph 子图id2粗线>id3{菱形}id3-. 虚线.->id4>右向旗帜]id3--无箭头---id5((圆形))end方向定义 用词含义TB从…

[OnWork.Tools]系列 05-系统工具

简介 系统工具主要是将Window常用工具的快捷启动的集合 双击快速启动 计算器,记事本,截图,画图工具 控制面板,服务管理,关闭显示器,关机 启动文件夹,我的电脑,管理工具 右键菜单 添加快捷方式到桌面

通过anvt X6和vue3实现图编辑

通过anvt X6 X6地址&#xff1a;https://x6.antv.antgroup.com/tutorial/about&#xff1b; 由于节点比较复杂&#xff0c;使用vue实现的节点&#xff1b; x6提供了一个独立的包 antv/x6-vue-shape 来使用 Vue 组件渲染节点。 VUE3的案例&#xff1a; <template><div…

基于Python 简易实现接口测试自动化

目录 实现思路 统筹脚本 请求封装 日志封装 结果比对 结果邮件 用例获取及数据格式化 请求url转换 测试用例excel结构 测试报告 邮件接收结果 资料获取方法 实现思路 使用excel管理用例用例信息&#xff0c;requests模块发送http请求&#xff0c;实现了记录日志&…

数据挖掘具体步骤

数据挖掘具体步骤 1、理解业务与数据 2、准备数据 数据清洗&#xff1a; 缺失值处理&#xff1a; 异常值: 数据标准化&#xff1a; 特征选择&#xff1a; 数据采样处理&#xff1a; 3、数据建模 分类问题&#xff1a; 聚类问题&#xff1a; 回归问题 关联分析 集成学习 image B…

ESP8266_RTOS_SDK AP和Station功能实现

一、开发环境搭建 SDK开发工具集选择乐鑫配置&#xff1a;VirtualBox Linux 交叉编译工具 使用的是以下这块开发板 VirtualBox下载地址 Lubuntu 镜像下载地址Lubuntu是一个轻量级系统&#xff08;由乐鑫官方提供&#xff09; source insight 编辑代码 为了便于我们开发&…

CSS的引入方式有哪些?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 内联样式&#xff08;Inline Styles&#xff09;⭐ 内部样式表&#xff08;Internal Stylesheet&#xff09;⭐ 外部样式表&#xff08;External Stylesheet&#xff09;⭐ 导入样式表&#xff08;Import Stylesheet&#xff09;⭐ 写在最…

Wlan——射频和天线基础知识

目录 射频的介绍 射频和Wifi 射频的相关基础概念 射频的传输 信号功率的单位 射频信号传输行为 天线的介绍 天线的分类 天线的基本原理 天线的参数 射频的介绍 射频和Wifi 什么是射频 从射频发射器产生一个变化的电流&#xff08;交流电&#xff09;&#xff0c;通过…

目前Java后端就业前景怎么样?

前言 并不乐观&#xff0c;看看现在的就业形式就知道了&#xff0c;基本上是僧多粥少的情况&#xff0c;你可能会看到很多编程语言排行榜或者流行榜中Java的排名很高&#xff0c;如同下面这种&#xff1a; 看排名确实可以粗略的得知语言当下的流行度、使用率&#xff0c;但是它…

ArcGIS制作带蒙版的遥感影像地图

这次文章我们来介绍一下&#xff0c;如何通过一个系统的步骤完成ArcGIS制作带蒙版的遥感影像地图。 主要的步骤包括&#xff1a; 1 添加行政区划数据 2 导出兴趣去乡镇矢量范围 3 添加遥感影像底图 4 制作蒙版 5 利用自动完成面制作蒙版 6 标注乡镇带晕渲文字 7 …

QGIS二次开发四:实现图层列表

在实际开发中我们通常会遇到同时显示多个图层&#xff0c;并且还要实时显示和隐藏各图层的需求&#xff0c;如同 ArcGIS 的图层列表那样&#xff0c;界面左侧显示图层列表&#xff0c;列出当前已加载的所有图层&#xff0c;同时每个图层前面有复选框可以控制图层的显示/隐藏&am…

边写代码边学习之numpy

1. numpy.matmul() 用法 matmul() 用于计算两个数组的矩阵乘积。示例如下 def matmul_test():array1 np.array([[[1.0, 3], [1, 1], [2, 3]]])array2 np.array([[2, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0],[1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0], ])result np.matmul(array1, …