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://xiahunao.cn/news/2805772.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

unity hub (第一部)初学配置

1、安装Unity Hub 2、设置中文 3、安装编辑器 4、新建项目 5、新建完成后进入编辑器 6、 编辑器设置中文 editPreferencesLanguages选择中文

《真象还原》读书笔记——第六章 完善内核

6.1 函数调用约定简介 接下来要使用C语言和汇编的混合编程 6.1.1 调用约定 参数的传递方式参数的传递顺序是调用者保存寄存器环境还是被调用者保存环境。保存的有哪些寄存器。 我们可以将参数保存到栈中 这时候有出现问题&#xff1a; 由谁来负责回收。参数多的情况下&…

【SpringCloudAlibaba系列--nacos配置中心】

Nacos做注册中心以及使用docker部署nacos集群的博客在这&#xff1a; 容器化部署Nacos&#xff1a;从环境准备到启动 容器化nacos部署并实现服务发现(gradle) 使用docker部署nacos分布式集群 下面介绍如何使用nacos做配置中心 首先要进行nacos-config的引入&#xff0c;引入…

线性代数:向量、张量、矩阵和标量

线性代数&#xff1a;向量、张量、矩阵和标量 背景 在线性代数中&#xff0c;向量、张量、矩阵和标量都属于基础概念&#xff0c;特别是最近AI的爆火&#xff0c;向量和张量的概念也越来越普及&#xff0c;本文将介绍下这些基本概念。 1. 标量&#xff08;Scalar&#xff0…

会声会影2024视频编辑软件电脑版本下载

一、功能特点 会声会影是一款功能强大的视频编辑软件&#xff0c;它集合了视频剪辑、特效添加、音频处理、字幕制作等多种功能于一身。具体来说&#xff0c;其特点包括&#xff1a; 会声会影2024安装包下载如下: https://wm.makeding.com/iclk/?zoneid55677 直观易用的操作…

WordPress前端如何使用跟后台一样的Dashicons图标字体?

很多站长都喜欢在站点菜单或其他地方添加一些图标字体&#xff0c;常用的就是添加Font Awesome 图标和阿里巴巴矢量库图标iconfont。其实我们使用的 WordPress 本身就有一套管理员使用的官方图标字体 Dashicons&#xff0c;登录我们站点后台就能看到这些图标字体。那么有没有可…

Dynamo批量将房间名称转换为模型文字

今天呢&#xff0c;我们简单聊聊如何把房间名称&#xff0c;变成模型文字&#xff0c;好在三维中能够看到房间名称。 本来吧&#xff0c;我觉得批量创建模型文字应该是个很简单的事&#xff0c;但是我在Dynamo中搜了下ModelText&#xff0c;发现只有一个在族环境中创建模型文字…

新版Java面试专题视频教程——虚拟机篇②

新版Java面试专题视频教程——虚拟机篇② 3 垃圾收回3.1 简述Java垃圾回收机制&#xff1f;&#xff08;GC是什么&#xff1f;为什么要GC&#xff09;3.2 对象什么时候可以被垃圾器回收3.2.1 引用计数法3.2.2 可达性分析算法 3.3 JVM 垃圾回收算法有哪些&#xff1f;——4种3.3…

EasyRecovery2024永久免费版手机数据恢复软件功能全面介绍

一、功能概述 EasyRecovery手机数据恢复软件是一款专为移动设备设计的数据恢复工具。它能够有效地从智能手机、平板电脑等移动设备中恢复因各种原因丢失的数据&#xff0c;包括但不限于误删除、格式化、系统崩溃、病毒感染等。 EasyRecovery-mac最新版本下载:https://wm.maked…

IT廉连看——C语言——循环语句

IT廉连看——C语言——循环语句 循环语句分为三种&#xff1a; while for do while 一、while循环 我们已经掌握了&#xff0c;if语句&#xff1a; if(条件)语句; 当条件满足的情况下&#xff0c;if语句后的语句执行&#xff0c;否则不执行。 但是这个语句只会执行一次…

源代码管理——码云Gitee

目录 Git安装 Gitee配置SSH 源代码管理常规操作 1.idea配置git 2.常规操作 Git安装 安装Git是进行源代码管理的基本步骤之一。以下是在本地安装Git的通用步骤&#xff0c;适用于Windows系统&#xff1a; 下载Git安装程序: 访问Git官网的下载页面&#xff1a;Git官网下载地…

选择适合你的编程语言

引言 在当今瞬息万变的技术领域中&#xff0c;选择一门合适的编程语言对于个人职业发展和技术成长至关重要。每种语言都拥有独特的设计哲学、应用场景和市场需求&#xff0c;因此&#xff0c;在决定投入时间和精力去学习哪种编程语言时&#xff0c;我们需要综合分析多个因素&a…

Redis(十四)双写一致性工程案例

文章目录 问题概述canal功能安装部署mysql配置canal服务端canal客户端&#xff08;Java程序&#xff09; 问题概述 canal https://github.com/alibaba/canal 功能 数据库镜像数据库实时备份索引构建和实时维护(拆分异构索引、倒排索引等)业务 cache 刷新带业务逻辑的增量数据…

爬取数位观察城市数据知识总结

# 抓取数位观察中城市的GDP,公交车数量&#xff0c;户籍人口 # url "https://www.swguancha.com/home/query-city-page" # 1.找数据 # 1.1如果数据在页面源代码里&#xff0c;则访问&#xff0c;在本案例中并没有在源代码中 # 1.2如果数据不在页面源代码里&#xff…

zookeeper快速上手

文章目录 1. docker安装zookeeper2. zookeeper基本使用&#xff08;Linux&#xff09;新增结点查看命令修改命令删除命令其他命令 3. zookeeper ACL(Linux)ACL 命令行ACL 构成ACL 特性world授权模式ip授权模式auth模式digest授权模式 4. IDEA操作Zookeeper连接zookeeper创建结点…

QT Widget自定义菜单

此文以设置QListWidget的自定义菜单为例&#xff0c;其他继承于QWidget的类也都可以按类似的方法去实现。 1、ui文件设置contextMenuPolicy属性为CustomContextMenu 2、添加槽函数 /*** brief onCustomContextMenuRequested 右键弹出菜单* param pos 右键的坐标*/void onCusto…

C++的文件操作详解

目录 1.文本文件 1.写文件 2.读文件 2.二进制文件 1.写文件 2.读文件 1.文本文件 1.写文件 #include<bits/stdc.h> #include<fstream> using namespace std;int main() {ofstream ofs;ofs.open("text.txt",ios::out);ofs << "abc&qu…

Curator基本使用

文章目录 1. 基本操作1.1 建立连接1.2 创建结点1.3 查询结点查询数据查询子结点查看结点信息 1.4 修改结点普通修改带乐观锁的修改 1.5 删除删除单个结点删除带子结点的结点必须成功的删除带回调函数的删除 2. 监听器事件2.1 NodeCache单一结点连续监听2.2 PathChildrenCache监…

“从根到叶:深入理解排序数据结构“

一.排序的概念及引用 1.1排序的概念 排序是指将一组数据按照一定的规则重新排列的过程。排序的目的是为了使数据具有有序性&#xff0c;便于查找、插入、删除等操作&#xff0c;提高数据的组织和管理效率。 稳定性是指如果序列中存在相等元素&#xff0c;在排序完成后&#…

300分钟吃透分布式缓存-12讲:为何MC能长期维持高性能读写?

内存管理 slab 机制 讲完淘汰策略&#xff0c;我们接下来学习内存管理 slab 机制。 Mc 内存分配采用 slab 机制&#xff0c;slab 机制可以规避内存碎片&#xff0c;是 Mc 能持续高性能进行数据读写的关键。 slabclass Mc 的 slab 机制是通过 slabclass 来进行运作的&#x…