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.mfbz.cn/a/404656.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Node.js安装及环境配置

1. 前言 Node.js简介 Node.js 是一个开源的、跨平台的 JavaScript 运行环境&#xff0c;它允许开发者使用 JavaScript 编写服务器端代码。Node.js 基于 Google 的 V8 JavaScript 引擎构建&#xff0c;该引擎是 Chrome 浏览器中用于解析和执行 JavaScript 的核心组件。因此&am…

Ubuntu20.04 查看系统版本号

目录 uname -auname -vlsb_release -acat /etc/issuecat /proc/version uname -a 查看系统发行版本号和操作系统版本 uname -v 查看版本号 lsb_release -a 查看发行版本信息 cat /etc/issue 查看系统版本 cat /proc/version 查看内核的版本号

Graphpad Prism10.2.0(329) 安装教程 (含Win/Mac版)

GraphPad Prism GraphPad Prism是一款非常专业强大的科研医学生物数据处理绘图软件&#xff0c;它可以将科学图形、综合曲线拟合&#xff08;非线性回归&#xff09;、可理解的统计数据、数据组织结合在一起&#xff0c;除了最基本的数据统计分析外&#xff0c;还能自动生成统…

来分析两道小题

一、源码 二、分析 首先它会接两个参数一个是id一个是ps&#xff0c;传递的话会包含一个flag.php&#xff0c;然后数据库连接&#xff0c;之后传递过滤&#xff0c;然后查询&#xff0c;如果查到了就会取id&#xff0c;取出来看是不是跟adog一样&#xff0c;如果是它告诉你账号…

在springboot中调用openai Api并实现流式响应

之前在《在springboot项目中调用openai API及我遇到的问题》这篇博客中&#xff0c;我实现了在springboot中调用openai接口&#xff0c;但是在这里的返回的信息是一次性全部返回的&#xff0c;如果返回的文字比较多&#xff0c;我们可能需要等很久。 所以需要考虑将请求接口响应…

c++服务器开源项目Tinywebserver运行

c服务器开源项目Tinywebserver运行 一、Tinywebserver介绍二、环境搭建三、构建数据库四、编译Tinywebserver五、查看效果 Tinywebserver是github上一个十分优秀的开源项目&#xff0c;帮助初学者学习如何搭建一个服务器。 本文讲述如何在使用mysql跟该项目进行连接并将项目运行…

集合、List、Set、Map、Collections、queue、deque

概述 相同类型的数据进行统一管理操作&#xff0c;使用数据结构、链表结构&#xff0c;二叉树 分类&#xff1a;Collection、Map、Iterator 集合框架 List接口 有序的Collection接口&#xff0c;可以对列表中的每一个元u尿素的插入位置进行精确的控制&#xff0c;用户可以根…

Vue2 基础面试题

v-show 和 v-if 区别 v-show 通过 CSS display 控制显示和隐藏v-if 通过判断组件真实渲染和销毁&#xff0c;而不是显示和隐藏频繁切换显示状态用 v-show&#xff0c;否则用 v-if v-if 当 v-if 与 v-for 一起使用时&#xff0c;v-for 具有比 v-if 更高的优先级&#xff0c;意…

DT DAY3 信号和槽

作业&#xff1a; 1> 思维导图 2> 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 btn3 new QPushButton("按钮3",this);btn3->resize(ui->btn2->width(),ui->b…

有名管道的大小

管道&#xff1a;有名管道、无名管道 通信&#xff1a; 单工通信&#xff1a;固定的读端和写端 -- 广播 半双工通信&#xff1a;同一时刻&#xff0c;只有有一方写&#xff0c;另外一方读:对讲机 全双工通信&#xff1a;随时两方都能读写 -- 电话 特点&#xff1a; 管道属…

Cosmos收益协议Hover以800%的超额认购结束公开销售

Hover&#xff0c;建立在Cosmos的Kava EVM上的可持续收益生态系统&#xff0c;在其公开销售中积累了超过800万美元的存款。 Hover&#xff0c;Kava EVM上新推出的收益生态系统&#xff0c;已经在顶级加密货币Launchpad DAO Maker上结束了其公开销售。通证销售旨在筹集100万美元…

Shell 脚本系列 | xsync同步脚本的使用

xsync是一个同步脚本&#xff0c;它实际上是对rsync脚本的二次封装&#xff0c;可以简化在多个节点之间同步文件的过程。以下是使用xsync工具的基本步骤&#xff1a; 1.确保已安装rsync。如果没有安装&#xff0c;可以使用以下命令进行安装&#xff1a; yum -y install rsync…

GB28181 —— Ubuntu20.04下使用ZLMediaKit+WVP搭建GB28181流媒体监控平台(连接带云台摄像机)

最终效果 简介 GB28181协议是视频监控领域的国家标准。该标准规定了公共安全视频监控联网系统的互联结构&#xff0c; 传输、交换、控制的基本要求和安全性要求&#xff0c; 以及控制、传输流程和协议接口等技术要求&#xff0c;是视频监控领域的国家标准。GB28181协议信令层面…

umi - react web端 集成腾讯即时通信IM,实现自定义翻译功能

项目使用umi - react 框架 在集成腾讯的IM的时候需要用到自定义翻译功能,调用自己的翻译服务 , 于是进行更改,发现按照官网提示的集成含UI的IM是直接下载依赖,然后引入组件包直接用,在官网上没看到有哪里配置自定义翻译的文档 , 于是咨询客服 最初的思路是在消息的更多选项中…

【Linux网络】网络编程套接字(TCP)

目录 地址转换函数 字符串IP转整数IP 整数IP转字符串IP 关于inet_ntoa 简单的单执行流TCP网络程序 TCP socket API 详解及封装TCP socket 服务端创建套接字 服务端绑定 服务端监听 服务端获取连接 服务端处理请求 客户端创建套接字 客户端连接服务器 客户端…

ubuntu20配置protobuf 2.5.0

python安装protobuf包 sudo pip2 install protobuf2.5.0github克隆获取安装包 wget https://github.com/protocolbuffers/protobuf/releases/download/v2.5.0/protobuf-2.5.0.tar.gz解压并进入该目录 tar -zxvf Protobuf-2.5.0.tar.gz cd protobuf-2.5.0配置安装环境 sudo …

【Vuforia+Unity】AR03-圆柱体物体识别(Cylinder Targets)

1.创建数据库模型 这个是让我们把生活中类似圆柱体和圆锥体的物体进行AR识别所选择的模型 Bottom Diameter:底部直径 Top Diameter:顶部直径 Side Length:圆柱侧面长度 请注意&#xff0c;您不必上传所有三个部分的图片&#xff0c;但您需要先为侧面曲面关联一个图像&#…

Atcoder ABC340 A-D题解

比赛链接:ABC340 话不多说&#xff0c;看题。 Problem A: 签到。 #include <bits/stdc.h> using namespace std; int main(){int a,b,d;cin>>a>>b>>d;for(int ia;i<b;id)cout<<i<<endl;return 0; } Problem B: 还是签到题。一个v…

张宇2025基础三十讲高等数学笔记(数二)

本次主要是根据书课包视频的进程&#xff0c;第1讲的01和02&#xff0c;分为基础知识和书上的例题加上经典1000题对应的相关的知识点 1.基础知识 1&#xff09;函数 2&#xff09;反函数 3&#xff09;复合函数 2.书上例题1000题 1&#xff09;函数 2&#xff09;反函数 3&a…

【Git】:远程仓库操作

远程仓库操作 一.理解版本控制系统二.远程仓库1.克隆2.Push操作3.fetch操作4. .gitnore文件 一.理解版本控制系统 我们⽬前所说的所有内容&#xff08;⼯作区&#xff0c;暂存区&#xff0c;版本库等等&#xff09;&#xff0c;都是在本地&#xff01;也就是在你的笔记本或者计…
最新文章