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;默认情况下读取操作不会产生锁。通过使用多…

布隆过滤器的原理

布隆过滤器&#xff08;Bloom Filter&#xff09;是由Burton Howard Bloom在1970年提出的一种空间效率很高的概率型数据结构&#xff0c;它用来测试一个元素是否在一个集合中。布隆过滤器可以非常快速地进行插入和查询操作&#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;对硬件设备的电气参数…

记一次线上报错 GList AddChildAt NullReferenceException

文章目录 问题描述分析结果总结 问题描述 后台日志大量报错&#xff0c;去主干看无法复现 c# exception:System.NullReferenceException: Object reference not set to an instance of an object. at FairyGUI.GCompone nt.AddChildAt (FairyGUI.GObject child, System.Int32 …

make的基本操作

./configure --with-name地址 &#xff08;相关库的安装路径&#xff09; make -jn //n指定最大核数 sudo make install //也可以指定安装目录 make install prefix路径 sudo ldconfig

二进制部署

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…

微信小程序canvas画布自由绘制/画笔功能实现

.wxml <canvas class="canvas" type="2d" id="myCanvas" bindtouchstart="update_edit_position" bindtouchmove="brush"/> .wxss 定义画布显示样式 .canvas{background-color: white;height: 65vh;width: 100%;m…

大模型时代: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;游戏…

c++学习:list链表模板类实战(学生管理系统)

要求&#xff1a; 编写一个学生结构体要求面向对象要求用到链表连接每个学生 代码 #include <iostream> #include <list> using namespace std;class Student {friend istream& operator>>(istream&in,Student &ra);friend bool cmp(Student …

安达发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 命…

155. 最小栈

155. 最小栈 题目链接&#xff1a;155. 最小栈 代码如下&#xff1a; class MinStack { public:stack<int> s_stack;stack<int> min_stack;MinStack() {}void push(int val) {s_stack.push(val);if(min_stack.empty()){min_stack.push(val);}else{min_stack.push…