uniapp使用vue3语法构建自定义导航栏,适配小程序胶囊

具体代码

<template><view class="nav-wrapper-container" :style="'height:'+navBarHeight +'px'"><view class="nav-status-container" :style="'height:'+navstatusBarHeight +'px;'" /><view v-if="isCustom" class="nav-content-container" :style="'height:'+navContentHeight +'px;'"><slot name="left"></slot><slot name="middle"> </slot><view :style="'width:'+navPaddingRight+'px;'+'height:40px'"></view></view><view v-else class="nav-content-container" :style="'height:'+navContentHeight +'px;'"><image v-if="!isInTab" class="nav-content-left" src="../../static/back.png" mode="widthFix"@click="handleClickBack" /><view class="nav-content-middle"><text>{{titleText}}</text></view></view><slot name="bottom" :style="'height:'+bottomComponentHeight +'px;'"></slot></view>
</template><script setup>import {onBeforeMount,ref,defineProps,defineEmits} from 'vue'const emits = defineEmits(['init-height'])/*** 整个导航栏的高度*/const navBarHeight = ref(0)/*** 状态栏高度*/const navstatusBarHeight = ref(0)/*** 内容高度*/const navContentHeight = ref(0)/*** 距离右侧胶囊的padding-right*/const navPaddingRight = ref(0)/*** 是否在tab页*/const isInTab = getCurrentPages().length == 1/*** 获取导航栏尺寸*/const initNavSize = () => {///获取系统信息const {statusBarHeight,uniPlatform} = uni.getSystemInfoSync()///是否支持这个方法const isNoSupportGetMenuButton = (uniPlatform == "app") || (uniPlatform == "web") || (uniPlatform == "mp-lark")///内容高度let contentHeight = 0///计算内容高度if (!isNoSupportGetMenuButton) {///拿到胶囊信息const menuButton = uni.getMenuButtonBoundingClientRect()contentHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.heightnavPaddingRight.value = menuButton.width + 24} else {contentHeight = 48navPaddingRight.value = 24}///赋值状态栏高度navstatusBarHeight.value = statusBarHeight///赋值内容高度navContentHeight.value = contentHeight///总的高度=内容高度+状态栏高度+bottom组件高度console.log("props.bottomComponentHeight is " + props.bottomComponentHeight)console.log("statusBarHeight is " + statusBarHeight)console.log("contentHeight is " + contentHeight)navBarHeight.value = statusBarHeight + contentHeight + parseInt(props.bottomComponentHeight)emits('init-height', navBarHeight.value)}/*** 返回*/const handleClickBack = () => {uni.navigateBack({delta: 1 // 返回的页面数,这里设置为1表示返回上一页});}const props =defineProps({///标题titleText: {type: String,default: ""},///是否使用自定义插槽isCustom: {type: Boolean,default: false},///bottom组件高度bottomComponentHeight: {type: String,default: "0"}})onBeforeMount(() => {initNavSize()})
</script><style lang="less">.nav-wrapper-container {height: var(--status-bar-height);width: 100%;position: fixed;width: 100%;top: 0;background-color: #f3f3f3;left: 0;z-index: 2;align-items: center;}.nav-status-container {width: 100%}.nav-content-container {width: 100%;display: flex;position: relative;align-items: center;}.nav-content-left {width: 40rpx;margin-left: 12rpx;}.nav-content-middle {position: absolute;left: 50%;transform: translate(-50%);}
</style>

使用方法:

使用默认配置:

<navbar titleText="这是标题"></navbar>

使用自定义插槽:

		<navbar :isCustom="true" @init-height="initNavHeight" data-eventsync="true" bottomComponentHeight="45"><template v-slot:left><image class="nav-content-left" src="../../static/back.png" mode="widthFix" @click="handleClickBack" /></template><template v-slot:middle><view class="search-bar-middle" @click="handlerClickSearch()"><image src="../../static/search.png" mode="widthFix" style="width: 24rpx"></image><text class="search-bar-middle-text">搜索内容、体系、文章</text></view></template><template v-slot:bottom><classify-menu-bar :tabArr="tabArr" @on-change-tab="onChangeTab" class="classify-top-container"></classify-menu-bar></template></navbar>

一共有三个插槽:

  • left: 左侧
  • middle:居中
  • bottom:固定底部 (需用传递属性,作为底部buttom的高度)

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

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

相关文章

数字化转型导师坚鹏:BLM证券公司数字化转型战略

BLM证券公司数字化转型战略 ——以BLM模型为核心&#xff0c;实现知行果合一 课程背景&#xff1a; 很多证券公司存在以下问题&#xff1a; 不知道如何系统地制定证券公司数字化转型战略&#xff1f; 不清楚其它证券公司数字化转型战略是如何制定的&#xff1f; 不知道…

Redis 淘汰策略、持久化、高可用

淘汰策略 只有 redis 内存空间已满并且往里面写新数据&#xff0c;才会触发淘汰策略。通过 expire / / /pexpire 让 key-value 过期&#xff0c;从而让 redis 清除这个 key-value。value 的数据结构typedef struct redisObject {unsigned tpye:4;unsigned encoding:4;// 判断哪…

个人数仓开发面试题记录

一.广州电商公司 1.简单自我介绍 2.介绍下之前的公司离线数仓项目 3.mysql和hive区别&#xff1f; 4.sql的执行顺序&#xff1f; 5.hive的优化 6.说下你之前公司来&#xff0c;你的技能层次在每个公司&#xff1f;你怎么评价你的技能&#xff1f; 7.你的之前业务主要是做什么&…

Linux基础命令[10]-cmp

文章目录 1. cmp 命令说明2. cmp 命令语法3. cmp 命令示例3.1 不加参数3.2 -b&#xff08;显示不同的字节&#xff09;3.3 -i&#xff08;跳过字节&#xff09;3.4 -l&#xff08;显示所有不同&#xff09;3.5 -n&#xff08;比较n个字节&#xff09;3.6 -s&#xff08;不显示信…

el-select 不能重复选择

el-select 不能重复选择&#xff0c;注意&#xff1a;删除后可以再次重新被选择 <el-form-item><el-select v-model"attribute.attributeSelect" change"changeSelect()" placeholder"请选择属性分组" clearable><el-optionv-fo…

PostgreSQL restartpoint 原理详解

背景 大部分人对 PG 的 checkpoint 机制会熟悉一点&#xff0c;但是对 restartpoint 却不太熟悉&#xff0c;网上介绍这方面的文章也比较少。因此&#xff0c;本文将以 PG 14.7 的社区代码为基础&#xff0c;介绍 PG 中的 restartpoint 机制。 原理介绍 什么是 restartpoint…

华为OD技术面试案例1-2024年

背景&#xff1a; 学校背景&#xff1a;211本科工作经验&#xff1a;1年半转行目标&#xff1a;测试岗位 一、机考 &#xff08;得分&#xff1a;350&#xff09; 二、01.04 hr面 自我介绍选择东莞的原因对OD&#xff08;华为研发岗位&#xff09;的看法家庭情况简历相关问…

信息论笔记:信息量+熵+相对熵+交叉熵+损失函数

信息论 信息量 I(x) -log( P )I为信息量P为x发生的概率 熵 混乱程度的度量&#xff0c;不确定的局面表示很混乱系统里信息量的期望值H(x) -sum( P(i) * log( P(i) ) ) 相对熵(KL散度) 用于度量两个概率分布间的差异性信息D_KL(S | O) sum( P_S(x) * log_2( 1 / P_O(x)…

Mysql学习之各种锁

锁 事务的隔离性由锁来实现 MySQL并发事务访问相同记录 并发事务访问相同记录的情况大致可以分为3种&#xff1a; 读-读的情况 读-读情况&#xff0c;即并发事务相继读取相同的记录。读取操作本身不会对记录由有任何的影响&#xff0c;并不会引起什么问题&#xff0c;所以允许…

简要讲解OV7725摄像头

本文主要包含以下几部分内容&#xff1a; 1. 通过OV7725分析模块原理图。 2. 讲解部分寄存器的含义、RGB565格式图像输出时序、帧率计算。 3. 讲解SCCB协议与I2C协议的区别。 1、OV7725功能 OV7725是一款1/4英寸单芯片图像传感器&#xff0c;其感光阵列达到640*480&#xff0c…

LibreOJ 137. 最小瓶颈路(加强版) 题解 Kruscal重构树 ST表

声明&#xff1a;本题目是LibreOJ 136. 最小瓶颈路 题解 最小生成树 倍增加强版&#xff0c;建议先学习简单版的做法。 题目链接&#xff1a;LibreOJ 137. 最小瓶颈路&#xff08;加强版&#xff09; 题目描述&#xff1a; 给定一张无向图&#xff0c;询问两个结点之间的最小瓶…

【MySQL 系列】在 Windows 上安装 MySQL

在 Windows 平台上安装 MySQL 很简单&#xff0c;并不需要太复杂的步骤。按照本文的步骤操练起来就可以了。 文章目录 1、下载 MySQL 安装程序2、安装 MySQL 数据库2.1、选择安装类型2.2、检查所需组件2.3、安装所选产品组件2.4、产品配置2.5、配置高可用性2.6、配置服务器类型…

【leetcode】 剑指 Offer学习计划(java版本含注释)(下)

目录 前言第十六天&#xff08;排序&#xff09;剑指 Offer 45. 把数组排成最小的数&#xff08;中等&#xff09;剑指 Offer 61. 扑克牌中的顺子&#xff08;简单&#xff09; 第十七天&#xff08;排序&#xff09;剑指 Offer 40. 最小的k个数&#xff08;简单&#xff09; 第…

c++11多线程:call_once

文章目录 call_once示例一示例二 call_once std::call_once是 C11 标准库中的一个函数&#xff0c;用于确保某个函数只会被调用一次。 单例设计模式是一种常见的设计模式&#xff0c;用于确保某个类只能创建一个实例。由于单例实例是全局唯一的&#xff0c;因此在多线程环境中…

YOLO系列中的“data.yaml”详解!

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;主力高效涨点&#xff01;&#xff01;&#xff01; 一、data.yaml介绍 YOLO系列中的data.yaml文件包含了YOLO系列模型运行所需要的数据集路径、数据集中的类别数及标签。数据集路径可以用绝对路径也可以…

Python实现股票信息查询

目前两个常用的股票信息CPI&#xff1a; 腾讯行情CTPAPI接口源码 新浪行情CTPAPI 使用requests模块爬取股票信息&#xff0c;这里以查询股票市值为例。 一、根据股票名称查询股票代码 在python文件夹下设置两个表格GPLIST.xlsx&#xff0c;其中是A股全部代码和股票名称&#…

如何在飞书接入ChatGPT并结合内网穿透实现公网远程访问智能AI助手

文章目录 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 前言 在飞书中创建chatGPT机器人并且对话&#xff0c;在下面操作步骤中…

MySQL 高可用解决方案(双主双从)

1.环境说明 操作系统&#xff1a;centos7.7 主服务器&#xff1a;node2(192.168.1.102) 从服务器&#xff1a;node3(192.168.1.103) keepalived中虚拟ip(VIP):192.168.1.100 2.准备事项 主库和从库数据库的版本一致把主库的数据同步给从库一份 #对主库进行全局读锁定 FLUSH…

GEE代码条带问题——sentinel-1接缝处理的问题

问题 我有兴趣确定 NDVI 损失最大的年份。我创建了一个函数来收集所有陆地卫星图像并应用预处理。当我导出结果以识别 NDVI 损失最大年份时&#xff0c;生成的数据产品与陆地卫星场景足迹有可怕的接缝线。造成这种情况的原因是什么以及如何调整代码&#xff1f; sentinel1数据…

flutter之终极报错

看到这个报错头都大了 一开始在网上各种搜搜&#xff0c;然后有人说是flutter版本的问题&#xff0c;改完版本之后还是不对&#xff0c;又是各种搜搜搜 有人说是环境变量的问题&#xff0c;后来改了环境变量&#xff0c;妈的&#xff0c;竟然还不行&#xff0c;想砸电脑的心都…