uni-app小程序自定义导航栏

news2024/11/24 20:11:48

最近在开发一个uni-app小程序,用到了自定义导航栏,在这里记录一下实现过程:

page.json

在对应页面路由的style中设置入"navigationStyle": "custom"取消原生导航栏,自定义导航栏

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "保单详情",
		"navigationBarTextStyle": "light",
		"navigationStyle": "custom"
	}
},

index.js(nvue)

<template>
	<view class="content">
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
		<uni-nav-bar class="title" left-icon="left" title="保单详情" backgroundColor="transparent" :border="false" @clickLeft="back" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			};
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	
	};
</script>
<style lang="scss">
	.content {
		background: radial-gradient(circle at 0% 0%, rgba(255, 205, 155, 0.6), rgba(250, 251, 252, 0.5) 25%),
			radial-gradient(circle at 40% 5%, rgba(93, 179, 253, 0.6), rgba(250, 251, 252, 0.5) 30%),
			radial-gradient(circle at 90% 5%, rgba(118, 213, 255, 0.8), rgba(250, 251, 252, 0.5) 30%) beige;
	}
	.title {
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
</style>

非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量–status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。

目前 nvue 在 App 端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。

uni-nav-bar 自定义导航栏left-icon属性设置返回键,@clickLeft="back"返回调用方法,如不需要设置属性也可不写改属性,或直接使用<view class='title'>状态栏名称</view>标签代替。

更多详情可参考官网

效果

在这里插入图片描述
背景渐变色效果是由上面style样式自定义设置的,可按需要进行重新设置

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

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

相关文章

C++ //练习 3.8 分别用while循环和传统的for循环重写第一题的程序,你觉得哪种形式更好呢?为什么?

C Primer&#xff08;第5版&#xff09; 练习 3.8 练习 3.8 分别用while循环和传统的for循环重写第一题的程序&#xff0c;你觉得哪种形式更好呢&#xff1f;为什么? 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /********…

[晓理紫]每日论文分享(有源码或项目地址、中文摘要)--强化学习、模仿学习、机器人

专属领域论文订阅 VX 关注{晓理紫},每日更新论文,如感兴趣,请转发给有需要的同学,谢谢支持 如果你感觉对你有所帮助,请关注我,每日准时为你推送最新论文。 为了答谢各位网友的支持,从今日起免费为300名读者提供订阅主题论文服务,只需VX关注公号并回复{邮箱+论文主题}(…

深度强化学习(王树森)笔记10

深度强化学习&#xff08;DRL&#xff09; 本文是学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。本文在ChatGPT辅助下完成。 参考链接 Deep Reinforcement Learning官方链接&#xff1a;https://github.com/wangshusen/DRL 源代码链接&#xff1a;https://github.c…

KAFKA高可用架构涉及常用功能整理

KAFKA高可用架构涉及常用功能整理 1. kafka的高可用系统架构和相关组件2. kafka的核心参数2.1 常规配置2.2 特殊优化配置 3. kafka常用命令3.1 常用基础命令3.1.1 创建topic3.1.2 获取集群的topic列表3.1.3 获取集群的topic详情3.1.4 删除集群的topic3.1.5 获取集群的消费组列表…

如何使用 Google 搜索引擎保姆级教程(附链接)

一、介绍 "Google语法"通常是指在 Google 搜索引擎中使用一系列特定的搜索语法和操作符来精确地定义搜索查询。这些语法和操作符允许用户过滤和调整搜索结果&#xff0c;提高搜索的准确性。 二、安装 Google 下载 Google 浏览器 Google 官网https://www.google.c…

Python||1. 使用LSTM模型进行乘客的数目预测;2.对文件rest-api-asr_python_audio_16k.m4a进行语音识别

1. 使用LSTM模型进行乘客的数目预测 数据集 international-airline-passengers.csv&#xff08;可以不在意精度和loss&#xff09; import pandas as pd import numpy as np filename rC:\Users\15002\Desktop\data1\international-airline-passengers.csv data pd.read_cs…

科技云报道:新趋势下,国产数据库或“春山可望”

科技云报道原创。 从540亿元到1286亿元——这是中国通信标准化协会大数据技术标准推进委员会针对中国数据库行业给出的一份预测报告。 报告指出&#xff0c;未来五年&#xff0c;中国数据库行业将从百亿级市场跨越成为千亿级市场。 最近两年&#xff0c;中国的数据库行业似乎…

OAuth2的四种授权方式

OAuth2的四种授权方式 OAuth2的作用OAuth2的四种授权方式OAuth2相关名词授权码模式授权码模式的步骤 简化模式简化模式的步骤 密码模式密码模式的步骤 客户端模式客户端模式的步骤 OAuth2的作用 核心作用&#xff1a;颁发token&#xff0c;也就是令牌&#xff0c;token中一般包…

【DB2 流浪之旅】 第一讲 Linux 环境安装 db2 数据库

DB2数据库是IBM开发的一种大型关系型数据库平台。它支持多用户或应用程序在同一条SQL 语句中查询不同database甚至不同DBMS中的数据。一般DB2是搭配IBM Power系列小机使用的&#xff0c;兼容性好、性能高。当然DB2也有Linux版本的&#xff0c;相对性能会差一些&#xff0c;主要…

密评机构资质和开展业务资料

一、概念 密码&#xff1a;《密码法》定义是指对信息进行加密保护、安全认证的技术、产品、服务。分为&#xff1a;核心密码、普通密码、商用密码。 商用密码&#xff1a;《密码法》定义是指对不涉及国家秘密内容的信息进行加密保护或安全认证所使用的密码技术和密码产品。 …

JVM 内存模型

1 什么是 JVM 内存模型 JVM 需要使用计算机的内存&#xff0c;Java 程序运行中所处理的对象或者算法都会使用 JVM 的内 存空间&#xff0c;JVM 将内存区划分为 5 块&#xff0c;这样的结构称之为 JVM 内存模型。 2 JVM 为什么进行内存区域划分 随着对象数量的增加&#xff…

【Python机器学习系列】建立LightGBM模型预测心脏疾病(完整实现过程)

一、引言 前文回顾&#xff1a; 一文彻底搞懂机器学习中的归一化与反归一化问题 【Python机器学习系列】一文彻底搞懂机器学习中表格数据的输入形式&#xff08;理论源码&#xff09; 【Python机器学习系列】一文带你了解机器学习中的Pipeline管道机制&#xff08;理论源码…

如何一键导出多张图片二维码?图片批量建码生成的方法

现在很多的物品信息都会生成一张单独的图片&#xff0c;然后生成二维码印刷到包装或者其他地方上使用&#xff0c;那么如何快速将多张图片多批量生码处理&#xff0c;相信有很多的小伙伴都不太清楚该怎么完成。其实&#xff0c;大量图片生成二维码的方法是很简单的&#xff0c;…

MySQL默认的连接数151如何修改

在MySQL中修改 max_connections 的值可以通过以下几种方法进行&#xff1a; 1. 临时修改 可以通过MySQL命令行临时修改 max_connections 的值。这种修改直到下次MySQL服务重启时才会失效。要进行临时修改&#xff0c;可以使用以下命令&#xff1a; SET GLOBAL max_connectio…

聊聊DoIP吧

DoIP是啥? DoIP代表"Diagnostic over Internet Protocol",即互联网诊断协议。它是一种用于在车辆诊断中进行通信的网络协议。DoIP的目标是在现代汽车中实现高效的诊断和通信。通过使用互联网协议(IP)作为通信基础,DoIP使得诊断信息能够通过网络进行传输,从而提…

【Go】微服务架构下实现etcd服务注册与服务发现

中心网关&#xff1a;gateway 四个微服务&#xff1a;user、message、note、relationship 1 中心网关实现服务发现 1.1 设计EtcdDiscovery类 package entityimport ("context""fmt"clientv3 "go.etcd.io/etcd/client/v3""gonote/gatewa…

C#,斐波那契数列(Fibonacci Sequence)的八种算法与源代码

一、莱昂纳多斐波那契&#xff08;Leonardo Fibonacci&#xff09; 斐波那契公元1170年生于意大利比萨&#xff0c;卒于1250年&#xff0c;被人称作“比萨的莱昂纳多”&#xff0c;是一名闻名于欧洲的数学家&#xff0c;其主要的著作有《算盘书》、《实用几何》和《四艺经》等。…

Github 2024-01-31 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-01-31统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目5非开发语言项目3TypeScript项目1Jupyter Notebook项目1C项目1 基于项目的学习 创建周期&#xf…

SAP下载word

事务代码&#xff1a;STRANS 启动转换器 步骤 1. 将参数填入模板&#xff0c;并另存为word 2003 xml文档 2.使用网页打开xml文档&#xff0c;并将xml拷贝到转换器tt:template中&#xff0c;添加参数 3.替换参数&#xff0c;部分xml可能存在错误或者跑偏根据实际情况检查修改 …

WPF应用程序(.Net Framework 4.8) 国际化

1、新建两个资源字典文件zh-CN.xaml和en-US.xaml&#xff0c;分别存储中文模板和英文模板 (1) zh-CN.xaml <ResourceDictionary xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml&q…