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

Uniapp-小程序自定义导航栏

一、项目背景

制作小程序页面时候发现原生导航栏有一定的高度是没有背景渲染的会出现这种情况

但是我们需要的是

二、原因

小程序的原生导航栏存在。一般可以使用 纯色填充顶部栏

可以直接使用navigationBarBackgroundColor完成

在style中添加 "navigationBarBackgroundColor": "#FED000"

但是业务需求需要添加自定义的效果,例如一整张背景图纯色填充

三、自定义导航栏的使用

黄色部分为状态栏高度   uni.getSystemInfoSync().statusBarHeight;

红色部分为自定义导航栏高度。wx.getMenuButtonBoundingClientRect

在页面onload时候就可以计算出相关高度了

onLoad() {// 状态栏高度this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; // 胶囊数据const { top, height } = wx.getMenuButtonBoundingClientRect();// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
},
        <!-- 状态栏高度 --><view :style="{ height: `${statusBarHeight}px` }"></view><!-- 自定义导航栏高度 并 居中 --><view :style="{height: `${barHeight}px`,'line-height': `${barHeight}px`,'text-align': 'center',}"><text>自定义标题</text></view>

相关文章:

Uniapp-小程序自定义导航栏

一、项目背景 制作小程序页面时候发现原生导航栏有一定的高度是没有背景渲染的会出现这种情况 但是我们需要的是 二、原因 小程序的原生导航栏存在。一般可以使用 纯色填充顶部栏 可以直接使用navigationBarBackgroundColor完成 在style中添加 "navigationBarBackgrou…...

云课五分钟-08安装Opera成功-仓库中查找对应版本

前篇&#xff1a; 云课五分钟-07安装Opera失败-版本不匹配 视频&#xff1a; 云课五分钟-08安装Opera成功-仓库中查找对应版本 文本&#xff1a; 最佳的途径就是使用系统内置的FireFox。 这么折腾的主要是为了演示安装一个第三方程序可能遇到的问题&#xff0c;并给出一些思…...

设计师的好帮手!在线PS网页版工具让创意无限发挥!

PS已经成为设计师必备的基本技能软件。PS版本的不断更新升级使PS功能更加强大。PS可以完成从简单的艺术家到复杂的设计和插画。但与此同时&#xff0c;PS也有设计师经常批评的痛点:大文件运行时内存卡住&#xff0c;位图放大后清晰度低&#xff0c;无穷无尽的快捷键&#xff0c…...

Android Glide加载transform CenterCrop, CircleCrop ShapeableImageView圆形图并描边,Kotlin

Android Glide加载transform CenterCrop, CircleCrop ShapeableImageView圆形图并描边&#xff0c;Kotlin import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.load.resource.bitmap.CenterCrop import com.bumptech.glide.…...

【docker启动的Jenkins时,遇到时区问题处理】

1、查看容器中的时区 [rootlocalhost jenkins]# docker exec -it jenkins cat /etc/timezone Etc/UTC而本地使用的是Asia/shanghai [rootlocalhost jenkins]# timedatectl | grep Time zoneTime zone: n/a (CST, 0800)###查看 [rootlocalhost jenkins]# cd /usr/share/zoneinf…...

MySQL8.0学习笔记

1. CMD命令 1.1 数据库启动与停止 (1) 启动数据库&#xff1a;net start mysql80 (2) 停止数据库&#xff1a;net stop mysql80 1.2 数据库连接与退出 (1) 连接数据库&#xff1a;mysql [-hlocalhost -P3306] -uroot -p[123456] // 本地数据库可省略-h -P (2) 退出数据库…...

初始MySQL(七)(MySQL表类型和存储引擎,MySQL视图,MySQL用户管理)

目录 MySQL表类型和存储引擎 MyISAM MEMORY MySQL视图 我们先说说视图的是啥? 视图的一些使用细节 MySQL用户管理 原因 常见操作 MySQL表类型和存储引擎 -- 查看所有的存储引擎 SHOW ENGINES 我们常见的表有MyISAM InnoDB MEMORY 1.MyISAM不支持事务,也不支持外…...

Redis 配置文件信息中文翻译版

前言 Redis 配置文件信息中文翻译版&#xff0c;方便大家阅读和理解对应参数信息及配置参数信息 # Redis configuration file example# Note on units: when memory size is needed, it is possible to specify # it in the usual form of 1k 5GB 4M and so forth: # 注意:当…...

React项目首页中用canvas实现星空

文章目录 前言代码使用后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端系列文章 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#xff0c;感谢大家…...

flutter ios Exception : No Impeller Context is Available

在模拟器上运行 ios 项目的时候&#xff0c;图片显示不出来。真机可以显示 原因&#xff1a;ios默认启用 impeller&#xff08;新渲染引擎&#xff09;&#xff0c;不知道为什么项目不能使用。 禁用掉即可&#xff0c; 原因以及解决都在下面的链接里面了 Impeller rendering …...

[PHP]写个简单的分页静态接口用宝塔部署到Nginx

使用get方式传入page和pageSize参数&#xff0c;接口根据参数进行分页处理。 1.创建一个 PHP 文件 例如 city.php&#xff0c;用于定义接口和返回 JSON 数据。 2.在 city.php 文件中编写接口 <?php// 设置响应内容为 JSON 格式 header(Content-Type: application/json);…...

表单提交是

首先&#xff0c;确保你已经安装了Vue 3、Element UI和axios&#xff08;用于发送HTTP请求&#xff09;。你可以使用以下命令进行安装&#xff1a; bash复制代码 npm install vuenext element-ui axios --save <template> <el-form :model"form" :rules&q…...

Qt的委托代理机制

委托是Qt中的一种机制&#xff0c;用于在Qt模型/视图架构中处理特定类型的数据。委托提供了一种方便的方法来定制特定类型的数据的显示和编辑。委托可以做以下事情: 编辑特定类型的数据: 通过创建编辑器来编辑特定类型的数据,例如日期,数值等。 渲染特定类型的数据: 通过定制单…...

OpenCV入门5——OpenCV的算术与位运算

文章目录 图像的加法运算图像的减法运算图像的乘除运算图像的融合OpenCV位运算-非操作OpenCV位操作-与运算OpenCV位操作-或与异或为图像添加水印 图像的加法运算 # -*- coding: utf-8 -*- import cv2 import numpy as npimg cv2.imread(E://pic//4.jpg)# 图的加法运算就是矩阵…...

好用的开源项目地址

Sword: SpringBlade前端UI项目&#xff0c;基于react 、ant design、dva、umi&#xff0c;用于快速构建系统中后台业务。 官网&#xff1a;https://bladex.cn Saber: SpringBlade前端UI项目&#xff0c;对现有的avue2.0、element-ui库进行二次封装。基于json驱动的模块配置&am…...

深度学习(五)softmax 回归之:分类算法介绍,如何加载 Fashion-MINIST 数据集

Softmax 回归 基本原理 回归和分类&#xff0c;是两种深度学习常用方法。回归是对连续的预测&#xff08;比如我预测根据过去开奖列表下次双色球号&#xff09;&#xff0c;分类是预测离散的类别&#xff08;手写语音识别&#xff0c;图片识别&#xff09;。 现在我们已经对回…...

单稳态中间继电器\UEG/A-2H/220V 8A导轨安装 JOSEF约瑟

UEG系列中间继电器 UEG/A-2H2D中间继电器UEG/A-4H4D中间继电器UEG/A-2D中间继电器 UEG/A-2H中间继电器UEG/A-4H中间继电器UEG/A-4D中间继电器 UEG/A-6H中间继电器UEG/A-6D中间继电器UEG/A-8H中间继电器 UEG/A-10D中间继电器UEG/A-10H中间继电器UEG/A-2DPDT中间继电器 UEG/A-4DP…...

2311rust到20版本更新

Rust1.9 Rust1.9中最大的变化是稳定了包括停止恐慌启动的展开过程方法的std::panic模块: use std::panic; let result panic::catch_unwind(|| {println!("hello!"); }); assert!(result.is_ok()); let result panic::catch_unwind(|| {panic!("oh no!"…...

基于Spring、SpringMVC、MyBatis的漫画网站

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis的漫画网…...

MySQL数据库八股文

MySQL数据库八股文 第一章 数据库基础 1. 数据库概念 数据库是存储数据的仓库&#xff0c;数据库管理系统是操纵和管理数据库的大型软件&#xff08;如MySQL&#xff0c;InnoDB是其默认的存储引擎&#xff09;&#xff0c;SQL是操作关系型数据库的编程语言。 2. SQL语法与分…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...