uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐(不对齐来打我)

一、想要的效果

思路首先开启自定义导航栏,取消自带的导航栏,然后计算胶囊的高度和标题对齐

二、成品代码 

1、首先再你需要居中的代码添加以下style

	<view class="header":style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}"></view>

2、模板上写上这几个变量

data(){return{navBarTop: null,navBarHeight: null,
}
}

3、onload计算高度并赋值

onLoad() {let statuBar = uni.getSystemInfoSync().statusBarHeight;let menuButtonInfo = uni.getMenuButtonBoundingClientRect();console.log(menuButtonInfo)this.navBarTop = menuButtonInfo.top;this.navBarHeight = menuButtonInfo.height;},

三、效果

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

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

相关文章

freemarker语法和在java中应用

翻笔记翻出来的。 目录 基础简单示例标签assignincludeiflist内建函数空值问题运算符 在线测试 https://try.freemarker.apache.org/ 基础 freemarker是一个Java编写的模板引擎&#xff0c;它基于模板产生文本&#xff0c;输出可以是html、XML、JSP和Java等&#xff0c;只要给…

GitLab代码库提交量统计工具

1.说明 统计公司所有项目的提交情况&#xff0c;可指定分支和时间段&#xff0c;返回每个人的提交新增数、删除数和总数。 2.API 文档地址&#xff1a;http://公司gitlab域名/help/api/README.md 项目列表查询 返回示例&#xff1a; [{"id": 1, //项目ID"http…

271.【华为OD机试真题】查找一个有向网络的头节点和尾节点(有向无环图(DAG)-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解…

机器学习——线性回归算法、代价函数、梯度下降算法基础

线性回归 还是以之前的预测房价为例&#xff0c;根据不同尺寸的房子对应不同的售价组成的数据集画图&#xff0c;图如下 监督学习算法工作流程 假设函数其实就是我们所说的函数&#xff0c;在房价这个例子中&#xff0c;我们可以从上图中看出房价和房子面积是一个一元的线性函…

【进程地址空间】

目录 上层用户看到的地址父进程创建子进程对代码区的同一变量修改 进程地址空间进程地址空间需要划分 页表 上层用户看到的地址 一个系统中的进程是与其他进程共享内存和CPU的。如果某个进程不小心写入另一个使用该内存的进程&#xff0c;进程就可能以某种完全和程序逻辑无关的…

Apache Commons开源的工具库介绍

Apache Commons 是 Apache 软件基金会主持的一个项目&#xff0c;旨在提供一系列可重用的 Java 组件。这些组件覆盖了从数据封装、文本处理到网络通信等各个方面&#xff0c;是 Java 开发中常用的一系列工具库。Apache Commons 项目下的各个库通常以 "commons-" 开头…

css3实现动画无限循环

要在CSS3中实现动画的无限循环&#xff0c;你可以使用animation 属性和 infinite 关键字。以下是一个示例&#xff1a; keyframes myAnimation {0% { /* 起始状态 */ }50% { /* 中间状态 */ }100% { /* 结束状态 */ }}.element {animation: myAnimation 2s infinite; /* 设置动…

团簇束流沉积技术:氢气传感器守护安全与环境的利器

在当今日益增长的能源需求背景下&#xff0c;氢气作为一种清洁、高效的能源载体&#xff0c;正逐渐受到广泛关注。然而&#xff0c;氢气的易燃易爆特性也带来了不小的安全隐患。因此&#xff0c;精确、快速地监测氢气泄漏成为了确保生产安全和环境监测的重中之重。基于团簇束流…

《凤凰架构》 -分布式事务章节 读书笔记

分布式事务严谨的定义&#xff1a;分布式环境下的事务处理机制 CAP定理&#xff1a;在一个分布式系统中&#xff0c;涉及共享数据问题时&#xff0c;以下三个特性最多只能同时满足两个 一致性&#xff1a;代表数据在任何时刻、任何分布式节点中看到的都是符合预期的&#xff0…

HarmonyOS创建一个ArkTS卡片

创建一个ArkTS卡片 在已有的应用工程中&#xff0c;创建ArkTS卡片&#xff0c;具体操作方式如下。 创建卡片。 根据实际业务场景&#xff0c;选择一个卡片模板。 在选择卡片的开发语言类型&#xff08;Language&#xff09;时&#xff0c;选择ArkTS选项&#xff0c;然后单…

【LNMP】云导航项目部署及环境搭建(复杂)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、项目介绍1.1项目环境架构LNMP1.2项目代码说明 二、项目环境搭建2.1 Nginx安装2.2 php安装2.3 nginx配置和php配置2.3.1 修改nginx文件2.3.2 修改vim /etc/p…

制造业客户数据安全解决方案(数据防泄密需求分析)

机械行业是历史悠久的工业形式&#xff0c;与国民经济密切相关&#xff0c;属于周期性行业&#xff0c;是我国最重要的工业制造行业之一。即使网络经济与IT信息技术在世界范围内占据主导地位&#xff0c;依然离不开一个发达的、先进的物质基础&#xff0c;而机械行业正是为生成…

【kubernetes】二进制部署k8s集群之,多master节点负载均衡以及高可用(下)

↑↑↑↑接上一篇继续部署↑↑↑↑ 之前已经完成了单master节点的部署&#xff0c;现在需要完成多master节点以及实现k8s集群的高可用 一、完成master02节点的初始化操作 二、在master01节点基础上&#xff0c;完成master02节点部署 步骤一&#xff1a;准备好master节点所需…

Three.js加载PLY文件

这是官方的例子 three.js webgl - PLY 我在Vue3中使用&#xff0c;测试了好久始终不显示点云数据。在网上查询后发现ply文件要放置在public目录下才行 <el-row><el-button type"primary" class"el-btn" click"IniThree1">PLY</…

大模型与Agent:AI世界的“大脑”与“行动派”

一、开篇小聊 大家都知道AI很火&#xff0c;从chatGPT到最新的Sora发布&#xff0c;AI人工智能已经疾驰飞车般的速度来到你我身边&#xff01;但你知道AI背后的两大“明星”是谁吗&#xff1f;没错&#xff0c;它们就是23年火到现在的大模型和Agent&#xff01;那么他们有什么…

FreeSWITCH 1.10.10 简单图形化界面15 - JsSIP媒体控制

FreeSWITCH 1.10.10 简单图形化界面15 - JsSIP媒体控制 0、 界面预览1、本地媒体流获取session本地音频本地视频2、远端媒体流获取媒体流远端音频远端视频FreeSWITCH界面安装参考:https://blog.csdn.net/jia198810/article/details/132479324 0、 界面预览 http://myfs.f332…

docker部署seata1.6.0

docker部署seata1.6.0 Seata 是 阿里巴巴 开源的 分布式事务中间件&#xff0c;解决 微服务 场景下面临的分布式事务问题。需要先搭建seata服务端然后与springcloud的集成以实现分布式事务控制的过程 &#xff0c;项目中只需要在远程调用APi服务的方法上使用注解 GlobalTransa…

集群master和worker区别

1、Master Master 是 K8S 的集群控制节点&#xff0c;每个 K8S 集群里需要有一个 Master 节点来负责整个集群的管理和控制&#xff0c;基本上 K8S 所有的控制命令都是发给它&#xff0c;它来负责具体的执行过程。Master 节点通常会占据一个独立的服务器&#xff0c;因为它太重要…

使用logicflow流程图实例

一.背景 需要使用流程引擎开发项目&#xff0c;没有使用flowable、activiti这类的国外流程引擎&#xff0c;想使用国内的引擎二次开发&#xff0c;缺少单例模式的流程画图程序&#xff0c;都是vue、react、angluer的不适合&#xff0c;从网上找了antx6、logicflow、bpmn.js。感…

架构设计:数据库扩展

引言 随着业务的发展和用户规模的增长&#xff0c;数据库往往会面临着存储容量不足、性能瓶颈等问题。为了解决这些问题&#xff0c;数据库扩展成为了一种常见的解决方案。在数据库扩展的实践中&#xff0c;有许多不同的策略和技术可供选择&#xff0c;其中包括水平拆分、垂直…