uniapp自定义头部导航怎么实现?

一、在pages.json文件里边写上自定义属性

"navigationStyle": "custom"

二、在对应的index页面写上以下:

<view :style="{ height: headheight + 'px', backgroundColor: '#24B7FF', zIndex: 99, position: 'fixed', top: '0px', width: '100%' }">
</view>
<view class="head" :style="{ top: headheight + 'px', backgroundColor: '#24B7FF' }">
	<view>新乡市</view>
</view>
<view style="height: 100rpx;"></view>

三、在script标签的return里边写上

headheight: '',

四、在onLoad()周期里面写上

const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.statusBarHeight;
this.headheight = windowHeight;

五、style

.head {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		height: 100rpx;
		width: 100%;
		z-index: 99;
	}

效果:

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

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

相关文章

一起玩儿物联网人工智能小车(ESP32)——14. 用ESP32的GPIO控制智能小车运动起来(二)

摘要&#xff1a;本文主要讲解如何使用Mixly实现对单一车轮的运动控制。 下面就该用程序控制我们的小车轮子转起来了。打开Mixly软件&#xff0c;然后单击顶部“文件”菜单中的“新建”功能&#xff0c;我们来开启一个新程序的开发工作。 我们的工作同样是先从最简单的开始&am…

设计模式分类

不同设计模式的复杂程度、 细节层次以及在整个系统中的应用范围等方面各不相同。 我喜欢将其类比于道路的建造&#xff1a; 如果你希望让十字路口更加安全&#xff0c; 那么可以安装一些交通信号灯&#xff0c; 或者修建包含行人地下通道在内的多层互通式立交桥。 最基础的、 底…

视频编码码率控制

什么是码率控制 码率控制是编码器的一个重要模块&#xff0c;主要的作用就是用算法来控制编码器输出码流的大小。虽然它是编码器的一个非常重要的部分&#xff0c;但是它并不是编码标准的一部分&#xff0c;也就是说&#xff0c;标准并没有给码控设定规则。我们平时用的编码器…

50 个具有挑战性的概率问题 [04/50]:尝试直至首次成功

一、说明 你好&#xff0c;我最近对与概率相关的问题产生了兴趣。我偶然发现了 Frederick Mosteller 所著的《五十个具有挑战性的概率问题及其解决方案》这本书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇文章仅包含 1 个问题&#xff0c;使其…

基于python的excel检查和读写软件

软件版本&#xff1a;python3.6 窗口和界面gui代码&#xff1a; class mygui:def _init_(self):passdef run(self):root Tkinter.Tk()root.title(ExcelRun)max_w, max_h root.maxsize()root.geometry(f500x500{int((max_w - 500) / 2)}{int((max_h - 300) / 2)}) # 居中显示…

Python学习路线 - Python语言基础入门 - Python基础综合案例 - 数据可视化 - 动态柱状图

Python学习路线 - Python语言基础入门 - Python基础综合案例 - 数据可视化 - 动态柱状图 基础柱状图构建案例效果通过Bar构建基础柱状图反转x和y轴数值标签在右侧 基础时间线柱状图绘制创建时间线创建时间线自动播放时间线设置主题 动态GDP柱状图绘制需求分析列表的sort方法带名…

分巧克力c语言

分析&#xff1a;分巧克力&#xff0c;把每一种大小列举出来&#xff0c;在对巧克力分解&#xff0c;在加上所以的分解块数&#xff0c;在和人数比较&#xff0c;如果够分&#xff0c;就保存这一次的结果&#xff0c;在增大巧克力&#xff0c;如果不够分了&#xff0c;就打印上…

「Verilog学习笔记」并串转换

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 串并转换操作是非常灵活的操作&#xff0c;核心思想就是移位。串转并就是把1位的输入放到N位reg的最低位&#xff0c;然后N位reg左移一位&#xff0c;在把1位输入放到左移后…

【并发设计模式】聊聊两阶段终止模式如何优雅终止线程

在软件设计中&#xff0c;抽象出了23种设计模式&#xff0c;用以解决对象的创建、组合、使用三种场景。在并发编程中&#xff0c;针对线程的操作&#xff0c;也抽象出对应的并发设计模式。 两阶段终止模式- 优雅停止线程避免共享的设计模式- 只读、Copy-on-write、Thread-Spec…

计算机视觉基础(10)——深度学习与图像分类

前言 传统视觉算法采用手工设计特征与浅层模型&#xff0c;而手工设计特征依赖于专业知识&#xff0c;且泛化能力差。深度学习的出现改变了这一状况&#xff0c;为视觉问题提供了端到端的解决方案。在之前的课程中&#xff0c;我们已经学习了图像分类的传统知识。在本节课中&am…

Go 泛型之类型参数

Go 泛型之类型参数 文章目录 Go 泛型之类型参数一、Go 的泛型与其他主流编程语言的泛型差异二、返回切片中值最大的元素三、类型参数&#xff08;type parameters&#xff09;四、泛型函数3.1 泛型函数的结构3.2 调用泛型函数3.3 泛型函数实例化&#xff08;instantiation&…

RPN网络在图像处理中的应用

RPN&#xff08;Region Proposal Network&#xff0c;区域建议网络&#xff09;是深度学习中用于目标检测的关键组件之一&#xff0c;它通常与后续的目标检测网络&#xff08;如Fast R-CNN、Faster R-CNN等&#xff09;结合使用。RPN的主要作用是生成候选目标区域&#xff0c;从…

需求分析工程师岗位的职责描述(合集)

需求分析工程师岗位的职责描述1 职责&#xff1a; 1&#xff0c;负责需求调研&#xff0c;对需求进行分析&#xff0c;编写解决方案、需求规格说明书等 2&#xff0c;根据需求制作原型&#xff0c;并负责原型展示以及客户沟通等工作 3&#xff0c;负责向技术团队精确地传达业务…

C++力扣题目344--反转字符串

编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#xff1a;s ["h","e…

【Linux系统基础】(2)在Linux上部署MySQL、RabbitMQ、ElasticSearch、Zookeeper、Kafka、NoSQL等各类软件

实战章节&#xff1a;在Linux上部署各类软件 前言 为什么学习各类软件在Linux上的部署 在前面&#xff0c;我们学习了许多的Linux命令和高级技巧&#xff0c;这些知识点比较零散&#xff0c;同学们跟随着课程的内容进行练习虽然可以基础掌握这些命令和技巧的使用&#xff0c;…

带您了解目前AI在测试领域能够解决的那些问题

AI在测试领域主要应用场景 话不多说&#xff0c;直接给结论&#xff1a; 接口测试脚本的自动生成和校验&#xff08;依赖研发ai工具&#xff09;测试用例的自动生成UI自动化测试脚本的自动生成和校验测试文档的自动生成快速了解初涉的业务领域 关于ai对研发和测试的整体影响…

基于电商场景的高并发RocketMQ实战-NameServer内存中核心数据模型分析、内核级Producer发送消息流程

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 【11来了】文章导读地址&#xff1a;点击查看文章导读&#xff01; &#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f3…

统计和绘图软件GraphPad Prism mac功能特点

GraphPad Prism mac是一款专业的统计和绘图软件&#xff0c;主要用于生物医学研究、实验设计和数据分析。 GraphPad Prism mac功能和特点 数据导入和整理&#xff1a;GraphPad Prism 可以导入各种数据格式&#xff0c;并提供直观的界面用于整理、编辑和管理数据。用户可以轻松…

Django开发1

Django开发1 初识Django1.安装django2.创建项目2.1 在终端2.2 Pycharm 3. 创建app4.快速上手4.1 再写一个页面4.2 templates模板4.3 静态文件4.3.1 static目录4.3.2 引用静态文件 5.模板语法//Django开发案例&#xff1a;联通新闻中心6.请求和响应案例&#xff1a;用户登录7.数…

[java] 注释

目录 单行注释: 多行注释: 文档注释: doc标签 单行注释: 多行注释: 注意多行注释不能嵌套多行注释: 文档注释: 注释内容可以被JDK提供的工具 javadoc 所解析&#xff0c;生成一套以网页文件形式体现的该程序的说明文档&#xff0c;一般写在类。 doc标签 标签 描述 示例 …