uniapp自定义底部导航栏

1.新建 nav-custom.vue组件

<template><view class="nav-box" :style="{'height':height+'px','background':bgColor}"><!-- 自定义导航栏 --><view class="status_bar" :style="{'height':statusBarHeight+'px'}"><!-- uni-ui这里是状态栏 --></view><!-- 胶囊位置信息 --><view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}"><slot name='right-icon'></slot><view class="nav-main-back" @click="back" v-if="backIcon"><uni-icons type="back" size="26" color="#fff"></uni-icons></view><text class="nav-main-title"  :style="{color: titleColor}">{{title}}</text></view></view>
</template><script>export default {props: {bgColor: {type: String,default: "#F5CFA8"},backIcon: {type: Boolean,default: true},title: {type: String,default: "赴日通"},titleColor: {type: String,default: "#fff"}},data() {return {//总高度height: 0,//胶囊位置信息menuButtonRect: {},//状态栏的高度statusBarHeight: 0,//导航栏的高度navBarHeight: 0}},created() {// this.height = wx.getStorageSync('navBarHeight')this.getHeight();},methods: {//获取屏幕导航栏高度getHeight() {if (wx.canIUse('getMenuButtonBoundingClientRect')) {let sysInfo = wx.getSystemInfoSync(); //状态栏的高度this.statusBarHeight = sysInfo.statusBarHeight;// 胶囊位置信息let rect = wx.getMenuButtonBoundingClientRect();this.menuButtonRect = JSON.parse(JSON.stringify(rect));// 导航栏高度let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;this.navBarHeight = navBarHeight;// 自定义导航栏的高度this.height = sysInfo.statusBarHeight + navBarHeight;} else {wx.showToast({title: '您的微信版本过低,界面可能会显示不正常',icon: 'none',duration: 4000});}},//返回back() {uni.navigateBack({delta: 1})},}}
</script><style lang="scss" scoped>.status_bar {// height: var(--status-bar-height);width: 100%;// background:#ff0;}.nav-main {position: relative;// background:#f00;.nav-main-back {position: absolute;left: 10rpx;}.nav-main-title {color: #fff;font-size: 28rpx;}}
</style>

2.页面引入使用

在这里插入图片描述

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

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

相关文章

@Transactional 事务注解

第一、先简单介绍一下Spring事务的传播行为 所谓事务的传播行为是指&#xff0c;如果在开始当前事务之前&#xff0c;一个事务上下文已经存在&#xff0c;此时有若干选项可以指定一个事务性方法的执行行为。在TransactionDefinition定义中包括了如下几个表示传播行为的常量&…

HarmonyOS应用开发学习笔记 UIAbility组件间交互 UIAbility启动,页面跳转结果回调

1、 HarmoryOS Ability页面的生命周期 2、 Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 Styles装饰器&#xff1a;定义组件重用样式 Extend装饰器&#xff1a;定义扩展组件样式 5、HarmonyOS 应用开发…

MySQL的体系结构(超全总结版)

MySQL组成 连接池组件管理服务和工具组件SQL接口组件查询分析器组件优化器组件缓冲组件插件式存储引擎物理文件 存储引擎 InnoDB存储引擎 主要面向OLTP(在线事务处理)方面的应用&#xff0c;特点是行锁设计、支持外键&#xff0c;默认情况下读取操作不会产生锁。通过使用多…

Centos7下升级gcc/g++版本(简单 + 避坑)

在 Centos7 下&#xff0c;使用 yum 安装高版本的 gcc/g 最简单&#xff1a; yum -y install centos-release-scl yum -y install devtoolset-11-gcc devtoolset-11-gcc-c devtoolset-11-binutils需要安装哪个个版本的gcc/g&#xff0c;就把数字替换成对应的版本号。例如上面代…

船舶3d虚拟展厅线上制作降低展示成本

VR线上虚拟展厅漫游搭建平台是一种新兴的技术&#xff0c;它能够为用户提供更加真实、沉浸式的体验。目前&#xff0c;市场上有许多公司提供VR线上虚拟展厅漫游搭建平台技术服务&#xff0c;为客户提供全方位的支持。 首先&#xff0c;这些公司通常会提供专业的策划和设计服务。…

TCP三次握手过程?

TCP三次握手过程&#xff1f; 分享 回答 1 浏览 3662 一颗小胡椒 2 CISM-WSE CISP-PTS 三次握手是 TCP 连接的建立过程。在握手之前&#xff0c;主动打开连接的客户端结束 CLOSE 阶段&#xff0c;被动打开的服务器也结束 CLOSE 阶段&#xff0c;并进入 LISTEN 阶段。随后进入…

常见的硬件连通性测试方法有哪些?

硬件连通性测试是确保硬件系统正常运行的关键一环。通过采用电气测试、数据传输测试和信号完整性测试等方法&#xff0c;可以有效发现和解决硬件连接中的问题&#xff0c;提高系统的可靠性和性能。 1、电气测试 通过使用示波器、多用途表等工具&#xff0c;对硬件设备的电气参数…

二进制部署

HOST HostnameIP地址flannedAPPmaster192.169.116.10ETCD\APIserver\Scheduler\Controller-Managernode1192.168.116.11172.17.28.0ETCD,Flanned,Kubelet,kube-proxynode2192.168.116.12172.17.26.0ETCD,Flanned,Kubelet,kube-proxy Kubernetes社区 Kubernetes文档 ETCD mas…

大模型时代:AI原生企业的崛起

导读&#xff1a;当前&#xff0c;以大模型为代表的人工智能技术已成为驱动经济社会发展、提升国家竞争力的关键要素&#xff0c;并以前所未有的速度重塑产业的新格局、驱动经济发展的新方向&#xff0c;并展现出强大的赋能效应&#xff0c;给千行百业带来“质量与效率”的变革…

ORPC-824,对标可替代ACPL-824/PC824等

提供隔离反馈 逻辑电路之间的接口 电平转换 DC和AC输入 SMPS中的调节反馈电路 消除接地环路 特征 电流传输比 &#xff08; CTR &#xff1a; 最低 20% 在 IF 1mA&#xff0c; VCE 5V &#xff09; 宽工作温度范围 -55~110C 高输入输出隔离电压 &#xff08; Viso 5&am…

怎么批量创建多个文件夹并命名?

怎么批量创建多个文件夹并命名&#xff1f;在日常的文件管理中&#xff0c;有时候我们需要批量创建多个文件夹并给它们命名&#xff0c;以便更好地组织和分类我们的文件。无论是在工作中还是个人使用中&#xff0c;批量创建文件夹可以帮助我们更高效地整理和管理文件。想象一下…

游戏引擎支持脚本编程有啥好处

很多游戏引擎都支持脚本编程。Unity、Unreal Engine、CryEngine等大型游戏引擎都支持使用脚本编写游戏逻辑和功能。脚本编程通常使用C#、Lua或Python等编程语言&#xff0c;并且可以与游戏引擎的API进行交互来控制游戏对象、设置变量、执行行为等。使用脚本编程&#xff0c;游戏…

安达发APS|超级BOM是什么?

超级BOM&#xff08;Bill of Materials&#xff09;是一种在制造业中广泛使用的工具&#xff0c;用于管理和控制产品的制造过程。它包含了制造一个产品所需的所有原材料、零部件、组件和组装件的清单&#xff0c;以及它们的数量和规格。超级BOM不仅包括直接用于产品制造的物料&…

2024.1.8 关于 Redis 数据类型 Zset 集合命令、编码方式、应用场景

目录 引言 Zset 集合命令 ZINTERSTORE ZUNIONSTORE Zset 编码方式 Zset 应用场景 排行榜系统 引言 在 Redis 中集合间操作无非就是 交集、并集、差集 Set 类型与之相对应的操作命令为 sinter、sunion、sdiff 注意&#xff1a; 从 Redis 6.2 版本开始&#xff0c;Zset 命…

mariadb实现主从同步

准备两台服务器 Mariadb-Master&#xff1a;192.168.44.150 Mariadb-Backup&#xff1a;192.168.44.148 安装mariadb&#xff1a; https://blog.csdn.net/qq_50247813/article/details/135402502?spm1001.2014.3001.5502 组从复制原理如下 修改主数据库配置如下 vi /etc/my.…

游戏、设计选什么内存条?光威龙武系列DDR5量大管饱

如果你是一位PC玩家或者创作者&#xff0c;日常工作娱乐中&#xff0c;确实少不了大容量高频内存的支持&#xff0c;这样可以获得更高的工作效率&#xff0c;光威龙武系列DDR5内存条无疑是理想之选。它可以为计算机提供强劲的性能表现和稳定的运行体验&#xff0c;让我们畅玩游…

【PB续命07】JDBC连接达梦数据库

JDBC(Java DataBase Connectivity) 称为Java数据库连接&#xff0c;它是一种用于数据库访问的应用程序API&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;有了JDBC就可以用同一的语法对多种关系数据库进行访问&#xff0c;而不用担心其数据库操作语言的差异。 有了…

中国IT产经新闻:新能源汽车发展前景与燃油车的利弊之争

随着科技的进步和环保意识的提高&#xff0c;新能源汽车在全球范围内逐渐受到重视。然而&#xff0c;在新能源汽车迅速发展的同时&#xff0c;燃油车仍然占据着主导地位。本文将从新能源与燃油车的利弊、新能源汽车的发展前景两个方面进行分析&#xff0c;以期为读者提供全面的…

Codeforces Hello 2024 A~D,F1

A.Wallet Exchange(思维) 题意&#xff1a; Alice和Bob各自拥有 a , b a,b a,b枚硬币&#xff0c;他们决定以Alice为先手开始比赛&#xff0c;比赛中每人在每轮需按顺序执行操作1和操作2&#xff1a; 操作1&#xff1a;交换两人手上拥有的硬币数量&#xff0c;或什么都不做 …

用python提取word中的所有图片

使用word中提取的方式图片会丢失清晰度&#xff0c;使用python写一个脚本&#xff0c;程序运行将弹出对话框选择一个word文件&#xff0c;然后在弹出一个对话框选择一个文件夹保存word中的文件。将该word中的所有图片都保存成png格式&#xff0c;并命名成image_i的样式。 程序…