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;}

效果:

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

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

相关文章

RocketMQ实践:确保消息不丢失与顺序性的高效策略

一、使用RocketMQ如何保证消息不丢失&#xff1f; 这个是在面试时&#xff0c;关于MQ&#xff0c;面试官最喜欢问的问题。这个问题是所有MQ都需要面对的一个共性问 题。大致的解决思路都是一致的&#xff0c;但是针对不同的MQ产品又有不同的解决方案。分析这个问题要从以 下几…

汽车服务品牌网站建设的作用是什么

汽车服务涵盖多个层面&#xff0c;在保修维护这一块更是精准到了车内车外&#xff0c;无论是品牌商还是市场中各维修部&#xff0c;都能给到车辆很好的维修养护服务。如今车辆的人均拥有量已经非常高&#xff0c;也因此市场中围绕汽车相关的从业者也比较多。 首先就是拓客引流…

SpringBoot找不到或无法加载主类

1&#xff0c;bug贴图 2&#xff0c;问题说明 之所以导致这个问题是因为新建项目的时候&#xff0c;项目目录是这样的com.lab.hei.springboot.dubbo.ProviderApplication 我觉得这个目录太长了&#xff0c;所以修改了目录&#xff0c;修改后cn.alisa.springboot.dubbo.Provider…

PostGreSQL:货币类型

货币类型&#xff1a;money money类型存储固定小数精度的货币数字&#xff0c;小数的精度由数据库的lc_monetary设置决定。windows系统下&#xff0c;该配置项位于/data/postgresql.conf文件中&#xff0c;默认配置如下&#xff0c; lc_monetary Chinese (Simplified)_Chi…

C++的一些零散小知识

文章目录 1、空指针nullptr的类型为std::nullptr_t2、函数定义中&#xff0c;如果不需要使用参数的值&#xff0c;可以省略参数名3、静态成员变量在C17之后可以直接在类内定义并初始化了 1、空指针nullptr的类型为std::nullptr_t 一个毫无意义的例子&#xff1a; template<…

【Oracle】修改表结构

目录 创建示例1&#xff1a;添加一个或多个列 创建示例2&#xff1a;修改列定义 创建示例3&#xff1a; 删除一列或多列 创建示例4:重命名列 创建示例5:重命名表 创建示例1&#xff1a;添加一个或多个列 -----语法&#xff1a;将新列添加到表中 ALTER TABLE table_name A…

大模型工具_QUIVR

https://github.com/StanGirard/quivr/ 24.5K Star 1 功能 整体功能&#xff0c;想解决什么问题 实现了前后端结合的 RAG 方案。构建能直接使用的应用。提出了“第二大脑”&#xff0c;具体实现也是RAG&#xff0c;但针对不同用户不同场景支持多个“大脑”并存&#xff0c;每个…

css 三角形实现方式及快速联想记忆

css实现三角形是常见的需求&#xff0c;在此记录如下 1 边框实现 原理&#xff1a;相邻的border之间会形成一条斜线(可按此联想记忆) .triangle {width: 0;height: 0;border-left: 100px solid red;border-right: 100px solid green;border-top: 100px solid blue;border-bot…

Spring Boot实践指南

一.SpringBoot入门案例 SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始搭建以及开发过程 原生开发SpringMVC程序过程 在没有SpringBoot前&#xff1a; 1.入门案例开发步骤 &#xff08;1&#xff09;创建新模块&#xff0c;选…

PADS Layout安全间距检查报错

问题&#xff1a; 在Pads Layout完成layout后&#xff0c;进行工具-验证设计安全间距检查时&#xff0c;差分对BAK_FIXCLK_100M_P / BAK_FIXCLK_100M_N的安全间距检查报错&#xff0c;最小为3.94mil&#xff0c;但是应该大于等于5mil&#xff1b;如下两张图&#xff1a; 检查&…

数据结构-如何巧妙实现一个栈?逐步解析与代码示例

文章目录 引言1.栈的基本概念2.选择数组还是链表&#xff1f;3. 定义栈结构4.初始化栈5.压栈操作6.弹栈操作7.查看栈顶和判断栈空9.销毁栈操作10.测试并且打印栈内容栈的实际应用结论 引言 栈是一种基本但强大的数据结构&#xff0c;它在许多算法和系统功能中扮演着关键角色。…

机器学习的一些有趣的点【异常检测】

机器能不能知道自己不知道&#xff0c;而不是给出判断中的一种&#xff1f; Classifier&#xff08;分类&#xff09;Anomaly Detection&#xff08;异常检测&#xff09; 机器能不能说出为什么知道&#xff1f; 有时候可能是因为数据的问题导致了这种错觉。 机器学习是否会有错…

为什么要使用vite

vue ——&#xff09;webpack 全部读取完毕才显示&#xff1a; vite:只读取修改的部分&#xff0c;速度比较快

canvas入门笔记(上)

Canvas Canvas简介 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和…

【JMeter】JMeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就不…

python13

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

方法论系列:数据科学框架入门

目录 第一章 - 数据科学家如何战胜困难第二章 - 数据科学框架第三章 - 步骤1&#xff1a;定义问题和步骤2&#xff1a;收集数据第四章 - 步骤3&#xff1a;准备数据第五章 - 数据清洗的4个C&#xff1a;纠正、补全、创建和转换第六章 - 步骤4&#xff1a;使用统计学进行探索性…

融资项目——swagger2的注解

1. ApiModel与ApiModelProperty(在实体类中使用) 如上图&#xff0c;ApiModel加在实体类上方&#xff0c;用于整体描述实体类。ApiModelProperty(value"xxx",example"xxx")放于每个属性上方&#xff0c;用于对属性进行描述。swagger2网页上的效果如下图&am…

IIS服务器的配置与管理

1) 安装IIS服务器&#xff0c;并添加站点&#xff0c;该服务器的IP地址为192.168.1.xx 。 2) 配置网站&#xff0c;并设置该站点不允许匿名访问&#xff0c;仅允许使用自己的本地用户登录连接。 3) 配置网站&#xff0c;限制拒绝192.168.1.100IP地址访问 。 4) 客户端使用19…

【Redis】七、Redis主从复制(重点)

文章目录 1、概念1.1、主从复制的作用主要包括1.2、一般来说&#xff0c;要将Redis运用于工程项目中&#xff0c;只使用一台Redis是万万不能的&#xff08;宕机&#xff09;&#xff0c;原因如下 2、环境配置2.1、复制拷贝3个配置文件&#xff0c;然后修改对应的信息拷贝文件改…