uniapp实战 —— 自定义顶部导航栏

效果预览

下图中的红框区域

在这里插入图片描述

范例代码

src\pages.json

配置隐藏默认顶部导航栏

     "navigationStyle": "custom", // 隐藏默认顶部导航

在这里插入图片描述

src\pages\index\components\CustomNavbar.vue

封装自定义顶部导航栏的组件(要点在于:获取屏幕边界到安全区域距离)

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script><template><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><view class="logo"><!-- <image class="logo-image" src="@/static/images/logo.jpg"></image> --><text class="logo-title">DOS圆梦大家庭</text><text class="logo-text">诚挚缘分 成就梦想</text></view></view>
</template><style lang="scss">
.navbar {background-image: url(@/static/images/navigator_bg.png);background-size: cover;display: flex;.logo {display: flex;align-items: center;height: 86rpx;padding: 20rpx;.logo-image {width: 40rpx;height: 40rpx;}.logo-title {font-size: 32rpx;color: #fff;font-weight: bold;}.logo-text {flex: 1;line-height: 28rpx;color: #fff;margin: 2rpx 0 0 20rpx;padding-left: 20rpx;border-left: 1rpx solid #fff;font-size: 26rpx;}}
}
</style>

src\pages\index\index.vue

在目标页面中导入使用

import CustomNavbar from './components/CustomNavbar.vue'
<CustomNavbar />

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

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

相关文章

OpenAI在中国,申请GPT-6、GPT-7商标

根据最新商标信息显示&#xff0c;OpenAI已经在中国提交了GPT-6和GPT-7的商标注册信息&#xff0c;分类是科学仪器和网站服务两大类。申请日期是今年的11月2日&#xff0c;目前处于审核状态。 该申请由知识产权代理公司完成&#xff0c;但申请人的地址正是OpenAI在美国公司的地…

Echarts图表title使用富文本

rich中有配置的话&#xff08;如a&#xff09;使用该样式&#xff0c;没有配置样式的话&#xff08;如b&#xff09;使用外层textstyle的样式&#xff0c;textstyle没有样式的话使用默认样式 const option1 {tooltip: {trigger: "item",},title: {text: ["{a|1…

Java代码审计之SpEL表达式注入漏洞分析

文章目录 前言SpEL表达式基础基础用法安全风险案例演示 CVE-2022-22963漏洞简述环境搭建反弹shell CVE漏洞调试分析本地搭建调试分析补丁分析 总结 前言 表达式注入是 Java 安全中一类常见的能够注入命令并形成 RCE 的漏洞&#xff0c;而常见的表达式注入方式有 EL 表达式注入…

124.(leaflet篇)leaflet禁止地图移动,缩放,双击

地图之家总目录(订阅之前必须详细了解该博客) 完整代码工程包下载,运行如有问题,可“私信”博主。效果如下所示: 下面献上完整代码,代码重要位置会做相应解释 <!DOCTYPE html> <html>

【Docker】使用docker-compose搭建django+vue工程文章

我们尝试使用docker-compose编排一个后端基于django,前端基于vue,数据库为postgresql并使用nginx进行反向代理的web工程。 工程准备 Docker 安装Docker 安装docker-compose django 在python3.7的环境下创建 修改settings.py文件 修改 将静态文件收集路径添加进 ,笔…

pip指定优先从豆瓣源下载包

对于 Unix/macOS 系统&#xff0c;使用以下命令&#xff1a; pip config set global.index-url https://pypi.douban.com/simple/ 对于 Windows 系统&#xff0c;打开命令提示符或PowerShell&#xff0c;并使用相同的命令&#xff1a; pip config set global.index-url http…

XUbuntu22.04之8款免费UML工具(一百九十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

供应链管理痛点大解析!内附解决方案

供应链是指涉及产品或服务生产、运输、分销和最终交付给客户的过程。 用一个汽车制造的例子来帮助大家理解&#xff1a; 原材料采购&#xff1a; 汽车制造商需要从供应商处采购制造汽车所需的原材料&#xff0c;例如金属、橡胶、塑料和玻璃。生产制造&#xff1a;获得原材料&…

UnoCSS 原子化开发初体验

UnoCSS 是一个即时的原子化 CSS 引擎&#xff0c;旨在灵活和可扩展。核心是不拘一格的&#xff0c;所有的 CSS 工具类都是通过预设提供的。再也不用为了取一个 classname 类名而烦恼了。 一、UnoCSS 特点 完全可定制&#xff1a;无核心工具&#xff0c;所有功能都通过预设提供…

如何公网访问内网的群晖NAS随时随地远程访问本地存储的学习资源

文章目录 前言本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是前排提醒&#xff1a; 1. 搭建群晖虚拟机1.1 下载黑群晖文件vmvare虚拟机安装包1.2 安装VMware虚拟机&#xff1a;1.3 解压黑群晖虚拟机文件1.4 虚拟机初始化1.5 没有搜索到黑群晖的解…

成都工业学院Web技术基础(WEB)实验六:ECMAScript基础语法

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…

TwinCAT3 Modbus-TCP Client/Server使用

目录 一、环境配置和准备 1、PLC中安装TF6250-Modbus-TCP库 2、勾选TF6250的license 3、PLC工程中添加Tc2_ModbusSrv库文件 4、分别创建测试ModbusTCP测试的Server和Client程序 二、PLC作为Client端 1、设置测试电脑IP地址 2、运行MobusTCP测试工具 3、PLC端程序编写 …

Hiera实战:使用Hiera实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

可学习超图拉普拉斯算子代码

python版本&#xff1a;3.6。sklearn版本&#xff1a;scikit-learn0.19 问题1&#xff1a;ERROR: Could not build wheels for ecos, scs, which is required to install pyproject.toml-based projects| 解决办法&#xff1a;cvxpy安装过程中遇到的坑_ecos 2.0.7.post1 cp37 …

大数据技术7:基于StarRocks统一OALP实时数仓

前言&#xff1a; 大家对StarRocks 的了解可能不及 ClickHouse或者是远不及 ClickHouse 。但是大家可能听说过 Doris &#xff0c;而 StarRocks 实际上原名叫做 Doris DB &#xff0c;他相当于是一个加强版的也就是一个 Doris ,也就是说 Doris 所有的功能 StarRocks 都是有的&a…

【设计模式--结构型--桥接模式】

设计模式--结构型--桥接模式 桥接&#xff08;Bridge&#xff09;模式定义结构案例好处使用场景 桥接&#xff08;Bridge&#xff09;模式 定义 将抽象与实现分离&#xff0c;使他们可以独立变化。它是用组合关系代替继承关系来实现&#xff0c;从而降低了抽象和实现这两个维…

达梦 DM 数据库

达梦数据库 varchar varchar2的区别, 推荐使用 varchar2 -- 日期格式化 SELECT DATE_FORMAT(GETDATE(), %Y-%m-%d %H:%i:%s);-- 2023-12-11 SELECT CURDATE();-- 2023-12-11 09:22:24 SELECT SYSDATE();-- 2023-12-11 11:09:53.136527 SELECT GETDATE();-- 当前日期1 -1天 SEL…

vite+vue3实现动态路由

在做这个动态路由的时候踩了很多坑&#xff0c;其中大部分是粗心了 动态菜单主要是导入的方式 import.meta.glob 参考&#xff1a;功能 | Vite 官方中文文档 1、多层路由渲染&#xff08;用3层路由做demo&#xff09; 拿到接口的数据是后台直接处理好的结构&#xff0c;但是…

VR转接线方案/VR Link串流数据线方案/VR眼镜PD快充方案

虚拟现实技术(英文名称&#xff1a;Virtual Reality&#xff0c;缩写为VR)&#xff0c;又称虚拟实境或灵境技术&#xff0c;是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术&#xff0c;其基本实现方式是以计算机技术为主&#xff0c;利用并…

kafka支持外网访问

kafka支持外网访问 1.kafka正常部署之后如果不修改&#xff0c;外网是无法访问的&#xff0c;具体如下&#xff08;这里是单节点&#xff09; 2.这个时候需要修改kafka的config中的server.properties中的 listeners 修改为0.0.0.0 监控所有网卡&#xff0c;advertised.listene…