uniapp 封装自定义头部导航栏

封装原因

项目中有时候需要使用自定义的头部导航栏,原生的无法满足需求

参数

属性名描述示例
title标题字符串:'首页'
bgColor背景色字符串:'#fff'
type左侧的操作内容字符串:'all',详细值请在下方查看

参数解释

type

  • all 有返回和回到首页
  • back 只有返回
  • home 只有回到首页
  • none 什么都没有

注意点

  • 组件有一个默认插槽,如果有特殊要求的导航栏可以使用插件进行自定义
  • title和type都是默认插槽中内容的值,所以如果你使用了插槽来自定义头部导航栏的话title和type会失效

代码

<template><viewclass="navbar-box":style="{ 'background-color': props.bgColor }"v-if="statusBarHeight && navBarHeight"><!-- 状态栏 --><view :style="{ height: statusBarHeight + 'px' }"></view><!-- 导航栏 --><view :style="{ height: navBarHeight + 'px' }"><slot><div class="navbar-default"><div class="default-left" v-if="props.type != 'none'"><view class="default-all" v-if="props.type == 'all'"><u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon><view class="default-line"></view><u-icon name="home" color="#fff" size="20" @click="goHome"></u-icon></view><view class="default-back" v-if="props.type == 'back'"><u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon></view><view class="default-home" v-if="props.type == 'home'"><u-icon name="home-fill" color="#fff" size="20" @click="goHome"></u-icon></view></div><view class="default-title">{{ props.title }}</view></div></slot></view></view><!-- 占位 --><view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
</template>
<script setup>import { ref, onMounted, computed, watchEffect } from 'vue';import { onLoad } from '@dcloudio/uni-app';const props = defineProps({title: {type: String,default: '',},bgColor: {type: String,default: '#fff',},type: {type: String,default: 'all',},});onMounted(() => {geStatusBarHeight();getNavBarHeight();});let statusBarHeight = ref(0);let navBarHeight = ref(0);// 获取状态栏高度function geStatusBarHeight() {statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];}// 获取导航栏高度function getNavBarHeight() {// #ifdef MP-WEIXINlet menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 胶囊信息// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调navBarHeight.value =menuButtonInfo.height +(menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 +2;// #endif// #ifdef APP-PLUS || H5navBarHeight.value = 44;// #endif}// 返回上一页function goBack() {const pages = getCurrentPages();if (pages.length == 1) {uni.reLaunch({url: '/pages/home/index',});return;}uni.navigateBack();}// 去首页function goHome() {uni.reLaunch({url: '/pages/home/index',});}
</script><style lang="scss" scoped>.navbar-box {position: fixed;top: 0;left: 0;width: 100%;z-index: 2000;.navbar-default {height: 100%;display: flex;justify-content: center;align-items: center;position: relative;.default-left {position: absolute;top: 50%;left: 24rpx;transform: translateY(-50%);.default-all {display: flex;justify-content: center;align-items: center;padding: 10rpx 30rpx;background: rgba(0, 0, 0, 0.5);border-radius: 32rpx;.default-line {width: 2rpx;height: 40rpx;background: #afafaf;margin: 0 20rpx;}}.default-back,.default-home {width: 63rpx;height: 63rpx;background: rgba(0, 0, 0, 0.5);border-radius: 50%;display: flex;justify-content: center;align-items: center;}}.default-title {color: #000;font-weight: bold;font-size: 16px;}}}
</style>

 

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

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

相关文章

docker学习笔记(五)--docker-compose

文章目录 常用命令docker-compose是什么yml配置指令详解versionservicesimagebuildcommandportsvolumesdepends_on docker-compose.yml文件编写 常用命令 命令说明docker-compose up启动所有docker-compose服务&#xff0c;通常加上-d选项&#xff0c;让其运行在后台docker-co…

Linux中inode

磁盘的空间管理 如何对磁盘空间进行管理&#xff1f; 假设在一块大小为500G的磁盘中&#xff0c;500*1024*1024524288000KB。在磁盘中&#xff0c;扇区是磁盘的基本单位&#xff08;一般大小为512byte&#xff09;&#xff0c;而文件系统访问磁盘的基本单位是4KB&#xff0c;因…

5G扬帆乘劲风,遨游通讯赋能千行百业谱新篇

在大型工厂&#xff0c;轻触手机屏幕&#xff0c;实时库存数据、人员定位等信息便跃然眼前、一目了然&#xff1b;在边远油田&#xff0c;动动手指&#xff0c;即可实时查询设备温度、危险气体浓度等信息&#xff0c;大数据瞬间尽在“掌”握……在遨游5G防爆智能手机的助力下&a…

RT Thread Studio新建STM32F407IG工程文件编译提示错误

编译提示错误 原因: RT 源码使用4.0.3的话&#xff0c;请用STM32F4支持包的0.2.2版本&#xff0c;就不会出错了。 如果支持包用0.2.3版本的话&#xff0c;需要用RT内核4.1.0版本。0.2.3 版本更新了一些针对内核4.1.0的驱动代码&#xff0c;这几个定义都是4.1.0里的。

学生管理系统(java)

1.前期准备 &#xff08;1&#xff09;新建java项目 &#xff08;2&#xff09;新建java软件包以及三个文件Student.java,Student.txt,StuSystem.java Student.java package student_management_system;public class Student {private String id;private String name;private…

JavaWeb学习(2)(Cookie原理(超详细)、HTTP无状态)

目录 一、HTTP无状态。 &#xff08;1&#xff09;"记住我"&#xff1f; &#xff08;2&#xff09;HTTP无状态。 &#xff08;3&#xff09;信息存储客户端中。如何处理&#xff1f; 1、loaclStorage与sessionStorage。 2、Cookie。 二、Cookie。 &#xff08;1&…

SpringBoot教程(三十二) SpringBoot集成Skywalking链路跟踪

SpringBoot教程&#xff08;三十二&#xff09; | SpringBoot集成Skywalking链路跟踪 一、Skywalking是什么&#xff1f;二、Skywalking与JDK版本的对应关系三、Skywalking下载四、Skywalking 数据存储五、Skywalking 的启动六、部署探针 前提&#xff1a; Agents 8.9.0 放入 …

flask创建templates目录存放html文件

首先&#xff0c;创建flask项目&#xff0c;在pycharm中File --> New Project&#xff0c;选择Flask项目。 然后&#xff0c;在某一目录下&#xff0c;新建名为templates的文件夹&#xff0c;这时会是一个普通的文件夹。 然后右击templates文件夹&#xff0c;选择Unmark as …

Java进阶(注解,设计模式,对象克隆)

Java进阶(注解&#xff0c;设计模式&#xff0c;对象克隆) 一. 注解 1.1 什么是注解 java中注解(Annotation)&#xff0c;又称java标注&#xff0c;是一种特殊的注释 可以添加在包&#xff0c;类&#xff0c;成员变量&#xff0c;方法&#xff0c;参数等内容上 注解会随同…

部署loki,grafana 以及springcloud用法举例

文章目录 场景docker 部署grafanadocker-compose部署loki维护配置文件 local-config.yaml维护docker-compose.yml配置启动 grafana 添加loki数据源springcloud用法举例查看loki的explore,查看日志 场景 小公司缺少运维岗位&#xff0c;需要研发自己部署日志系统&#xff0c;elk…

keil报错---connection refused due to device mismatch

解决办法如下&#xff1a; 记得改成1 把Enable取消

第三节、电机定速转动【51单片机-TB6600驱动器-步进电机教程】

摘要&#xff1a;本节介绍用定时器定时的方式&#xff0c;精准控制脉冲时间&#xff0c;从而控制步进电机速度 一、计算过程 1.1 电机每一步的角速度等于走这一步所花费的时间&#xff0c;走一步角度等于步距角&#xff0c;走一步的时间等于一个脉冲的时间 w s t e p t … ……

vue中pdf.js的使用,包括pdf显示,跳转指定页面,高亮关键词

目录 一、下载pdf.js 二、引入到本地的项目中 三、实现预览pdf 四、跳转到指定页面 五、利用pdf里面的find查找关键词 六、修改页面大小为实际大小 一、下载pdf.js https://github.com/mozilla/pdf.js 里面有很多的版本&#xff0c; 高版本的可能浏览器不兼容或者还要考…

OD B卷【连续字母长度】

题目 给定一个字符串&#xff0c;只包含大写字母&#xff0c;求在包含同一字母的子串中&#xff0c;长度第k长的子串的长度&#xff0c;相同字母只取最长的那个子串。 输入描述&#xff1a; 第一行输入一个子串&#xff08;长【1,100】&#xff09;&#xff0c;只包含大写字母…

python中的 Pydantic 框架介绍

Pydantic 框架介绍 Pydantic 是一个用于数据验证和设置管理的 Python 库。它主要通过数据模型类的定义来处理 JSON 数据、解析请求和响应数据&#xff0c;并提供自动化的验证和转换。Pydantic 主要用于处理 Python 类型的安全性和验证&#xff0c;尤其在 FastAPI 等现代 Pytho…

桥接模式和组合模式的区别

桥接模式&#xff08;Bridge Pattern&#xff09;和组合模式&#xff08;Composite Pattern&#xff09;都是结构型设计模式&#xff0c;旨在解决对象结构的复杂性问题&#xff0c;但它们的应用场景和目的有所不同。以下是它们的区别&#xff1a; 1. 定义与目的 桥接模式&…

Qt 小项目 学生管理信息系统

主要是对数据库的增删查改的操作 登录/注册界面&#xff1a; 主页面&#xff1a; 添加信息&#xff1a; 删除信息&#xff1a; 删除第一行&#xff08;支持多行删除&#xff09; 需求分析&#xff1a; 用QT实现一个学生管理信息系统&#xff0c;数据库为MySQL 要求&#xf…

14.数据容器-set集合

特点 无序的&#xff0c;元素不重复&#xff0c;自带去重功能。 可以容纳不同类型的元素数据。 # 定义一个空set my_set {} your_set set() my_set {aa, bb, bb, aa} # {aa, bb} print(my_set) 因为set集合是无序的&#xff0c;所以集合不支持下标索引访问。所以set集合…

“量子跃迁与数据织网:深入探索K最近邻算法在高维空间中的优化路径、神经网络融合技术及未来机器学习生态系统的构建“

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

硬件选型规则

光源选型: 先用型号中带H的&#xff0c;没有的选标准的. 光源和光源控制器的搭配需要确保接口一致。 根据型号表中的最佳工作距离和相机的尺寸。 光源控制器选型&#xff1a; 首先选择海康风格系列光源控制器考虑与光源的接口匹配。功率应该满足接近光源功率。检查是否退市…