uniapp自定义头部(兼容微信小程序(胶囊和状态栏)，兼容h5)
很早之前就写过自定义头部，但是那时偷懒写死了，现在用插槽重新写了个
有两种形式：
type1是完全自定义的，可以自己去组件改也可以用插槽改
type2是正常的返回标题和右边按钮，使用就是title="标题" @rightClick = "函数",右边按钮是插槽，可以和下面例子一样用
效果图
类型1
类型2 的h5
类型2的小程序
使用
<myHead title="首页" type="2"><view slot="right"><text>提交</text></view>
</myHead>
组件代码
<template><view class="myHead"><!-- myHead的占位 --><view class="myHead_placeholder" :style="{height: addUnit(height + statusBarHeight,'px')}"></view><view class="myHead_fixed" :style="{'paddingRight': capsuleWidth + 'px'}"><!-- 状态栏 --><view class="status_bar" :style="{height: addUnit(statusBarHeight)}"></view><!-- 头部本体 --><slot><view v-if="type == 1" class="myHead_content" :style="{height: addUnit(height)}"><image src="/static/img/logo.png"></image><text>为牛只-屠宰全产业护航{{capsuleWidth}}</text></view><view v-else class="myHead_content2" :style="{height: addUnit(height)}"><view class="left" @click="leftClick"><text class="iconfont icon-left"></text></view><view class="content">{{title}}</view><view class="right" @click="rightClick"><text>提交</text></view></view></slot></view></view>
</template><script>export default {name: "myHead",props: {// 点击左侧区域(返回图标)，是否自动返回上一页autoBack: {type: Boolean,default: false},title: {type: String | Number,default: '标题'},type: {type: String | Number,default: 2}},data() {return {// 状态栏statusBarHeight: 0,// 头部本体高度height: 44,// 如果有胶囊capsuleWidth: 0};},mounted() {// 手机状态栏的高度this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0this.getNavBarHeight()},methods: {// 获取胶囊宽度getNavBarHeight() {// 小程序环境// #ifdef MP-WEIXINconst menuButtonInfo = uni.getMenuButtonBoundingClientRect();uni.getSystemInfo({success: (systemInfo) => {this.capsuleWidth = menuButtonInfo.width + systemInfo.screenWidth - menuButtonInfo.right; // 胶囊宽度}})// #endif// #ifdef H5this.capsuleWidth = 0// #endif},addUnit(num, unit = 'px') {return num + unit},// 点击左侧区域leftClick() {// 如果配置了autoBack，自动返回上一页this.$emit('leftClick')if (this.autoBack) {uni.navigateBack()}},// 点击右侧区域rightClick() {this.$emit('rightClick')},}}
</script><style lang="scss" scoped>.myHead {.myHead_placeholder {width: 100%;}.myHead_fixed {position: fixed;left: 0;right: 0;top: 0;z-index: 11;.myHead_content {display: flex;align-items: center;image {width: 150rpx;margin-right: 10rpx;}text {font-size: 24rpx;color: rgba(29, 37, 65, 0.5);}}.myHead_content2 {display: flex;align-items: center;justify-content: space-between;padding: 0 20rpx;.left {font-size: 28rpx;}.content {flex: 1;text-align: center;font-size: 32rpx;}.right {font-size: 28rpx;}}}}
</style>
相关文章：
，兼容h5))
uniapp自定义头部(兼容微信小程序(胶囊和状态栏)，兼容h5)
很早之前就写过自定义头部，但是那时偷懒写死了，现在用插槽重新写了个 有两种形式： type1是完全自定义的，可以自己去组件改也可以用插槽改 type2是正常的返回标题和右边按钮，使用就是 title"标题" rightClic…...
mybatis的xml ${item}总是更新失败
场景 代码如下 void updateStatus(Param("deviceSerialIdCollection") Collection<String> deviceSerialIdCollection, Param("status") Integer status);<update id"updateStatus">UPDATE gb_monitor SET online#{status} WHERE d…...
数据库- JDBC
标题目录 JDBC基本概念JDBC 接口JDBC 工作原理 JDBC APIJDBC工作过程Driver 接口及驱动加载Connection 接口Statemen 接口ResultSet 接口PreparedStatement 接口 JDBC 基本概念 Java Database Connectivity：java访问数据库的解决方案希望用相同的方式访问不同的数…...
[26] cuda 应用之 nppi 实现图像格式转换
[26] cuda 应用之 nppi 实现图像格式转换 讲述 nppi 接口定义通过nppi实现 bayer 格式转rgb格式官网参考信息：http://gwmodel.whu.edu.cn/docs/CUDA/npp/group__image__color__debayer.html#details1. 接口定义 官网关于转换的原理是这么写的： Grayscale Color Filter Array …...
MYSQL-OCP官方课程学习截图
第一节 介绍...
医院信息管理系统全解析
目录 一、医院信息管理系统是什么 1. 概念阐释 2. 核心功能概述 二、医院信息管理系统的种类 1. 医院信息系统（HIS） 2. 电子病历系统（EMR） 3. 实验室信息管理系统（LIS） 三、医院信息管理系统的实际…...
模型上下文协议（MCP）：技术解析与生态发展
一、概念与目标 模型上下文协议（Model Context Protocol，MCP）是由Anthropic于2024年11月推出的开源协议，旨在为大语言模型（LLM）与外部工具、数据源提供标准化的双向通信框架。其核心目标是打破数据孤岛&am…...
laravel中layui的table翻页不起作用问题的解决
本地测试是好的，部署的时候就发现，翻页不起作用了。但lay_num序号是可以变化的，查看api接口传递的数据，发现数据没有变化，加上page2等翻页，也是不起作用，看来是url参数返回给后台，后…...
python上测试neo4j库
安装完了neo4j库后，如何使用。用python来小试牛刀 1.从其他博客上找来demo #coding:utf-8 from py2neo import Graph,Node,Relationship##连接neo4j数据库，输入地址、用户名、密码 graph Graph(bolt://xx.xx.xx.xx:7687,userneo4j,passwordneo4j1234)…...
云原生周刊：Kubernetes v1.33 正式发布
开源项目推荐 Robusta Robusta 是一个开源的 K8s 可观测性与自动化平台，旨在增强 Prometheus 告警的智能化处理能力。它通过规则和 AI 技术对告警进行丰富化处理，自动附加相关的 Pod 日志、图表和可能的修复建议，支持智能分组、自动修复和高…...
网络安全入门综述
引言 在数字化时代，网络安全（Cybersecurity）已成为保护个人、企业和政府机构免受数字威胁的关键领域。随着互联网的普及、云计算的兴起以及物联网（IoT）设备的激增，网络攻击的频率和复杂性不断增加。从数据…...
LLaMA-Factory部署以及大模型的训练（细节+新手向）
LLaMA-Factory 经过一段时间的探索，从手动编写训练代码到寻求框架辅助训练，遇到了各种各样的问题。前面我介绍了dify的部署，但是并没有详细介绍使用方式，是因为我在尝试利用dify的时候碰到了很多困难，总结下来首先就是…...
ASP.NET MVC 入门指南四
21. 高级路由配置 21.1 自定义路由约束 除了使用默认的路由约束，你还可以创建自定义路由约束。自定义路由约束允许你根据特定的业务逻辑来决定一个路由是否匹配。例如，创建一个只允许特定年份的路由约束： csharp public class YearRouteCo…...
rabbitmq-集群部署
场景：单个pod，部署在主节点，基础版没有插件，进阶版多了一个插件 基础版本： --- apiVersion: v1 kind: PersistentVolume metadata:name: rabbitmq-pv spec:capacity:storage: 5GiaccessModes:- ReadWriteOncestorage…...
明远智睿SSD2351开发板：开启工业控制新征程
在工业控制领域，对开发板的性能、稳定性和扩展性有着极高的要求。明远智睿的SSD2351开发板凭借其卓越的特性，为工业控制带来了全新的解决方案。 SSD2351开发板搭载四核1.4GHz处理器，强大的运算能力使其在处理工业控制中的复杂任务时游刃有余。…...
RISCV学习（5）GD32VF103 MCU架构了解
RISCV学习（5）GD32VF103 MCU架构了解 1、芯片内核功能简介 GD32VF103 MCU架构，采用Bumblebee内核，芯来科技（Nuclei System Technology）与台湾晶心科技（Andes Technology）联合开发&am…...
IDEA2022.3开启热部署
1、开启IDEA的自动编译 1.1 具体步骤：打开顶部工具栏 File -> Settings -> Build,Execution,Deployment -> Compiler 然后勾选 Build project automatically 。 1.2 打开顶部工具栏 File -> Settings -> Advanced Settings -> Compiler -> 然…...
《算法吞噬幻想乡：GPT-4o引发的艺术平权运动与版权核爆》
一、引言：现象级AI艺术事件的社会回响 GPT - 4o吉卜力风格刷屏现象 在当今数字化浪潮中，GPT - 4o吉卜力风格的作品在网络上掀起了一阵刷屏热潮。吉卜力工作室以其独特的水彩质感、奇幻氛围和孤独美学，在全球范围内拥有大量粉丝。而GPT - 4o强…...
yolov5 源码 +jupyter notebook 笔记 kaggle
YOLOv5 | Kaggle 直接用的githuab的源码，git clone 后output才有文件 直接gitclone他的源码用Vscode看 好久没见过16g了 怎么这么便宜 https://gadgetversus.com/graphics-card/nvidia-tesla-p100-pcie-16gb-vs-nvidia-geforce-rtx-4060/#google_vignette 好的&am…...
聊天室系统：多任务版TCP服务端程序开发详细代码解释
1. 需求 目前我们开发的TCP服务端程序只能服务于一个客户端，如何开发一个多任务版的TCP服务端程序能够服务于多个客户端呢? 完成多任务，可以使用线程，比进程更加节省内存资源。 2. 具体实现步骤 编写一个TCP服务端程序，循环等…...
Python（15）迭代器和生成器
在 Python 编程领域中，迭代器和生成器是两个强大且独特的概念，它们为处理数据序列提供了高效且灵活的方式。这篇博客将结合菜鸟教程内容，通过丰富的代码示例，深入学习 Python3 中的迭代器与生成器知识，方便日后复习回顾…...
无刷空心杯电机及机器人灵巧手的技术解析与发展趋势
一、无刷空心杯电机结构与技术解析 1. 核心结构设计 无刷空心杯电机的核心设计突破在于无铁芯转子与电子换向系统的结合。其结构由以下关键部分构成： 定子组件：采用印刷电路板（PCB）或柔性电路板（FPC）作为绕组载体，通过三维绕线技术形成空心杯状绕组，彻底消除齿槽效应…...
如何修复卡在恢复模式下的 iPhone：简短指南
Apple 建议使用恢复模式作为最后的手段，以便在 iPhone 启动循环或显示 Apple 标志时恢复 iPhone。这是解决持续问题的简单方法，但您很少使用。但是，当您的 iPhone 卡住恢复模式本身时，您会怎么做？虽然 iPhone 卡在这种…...
蒋新松：中国机器人之父
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 蒋新松：中国机器人之父 一、生平简介 1. 早年经历与求学道路 蒋新松出生…...
[Windows] MousePlus 5.5.9
[Windows] MousePlus 链接：https://pan.xunlei.com/s/VOOwKJ281kDaZV5_MpP1COd_A1?pwdn69c# MousePlus是一款轻便小巧的鼠标右键增强工具，使用鼠标右键拖动即可唤醒鼠标轮盘，这个功能界面和quicker的轮盘软件界面一样，操作逻辑…...
BT131-ASEMI无人机专用功率器件BT131
编辑：ll BT131-ASEMI无人机专用功率器件BT131 型号：BT131 品牌：ASEMI 封装：TO-92 批号：最新 引脚数量：3 特性：双向可控硅 工作温度：-40℃~150℃ 在智能化浪潮中，…...
ETL架构、数据建模及性能优化实践
ETL（Extract, Transform, Load）和数据建模是构建高性能数据仓库的核心环节。下面从架构设计、详细设计、数据建模方法和最佳实践等方面系统阐述如何优化性能。 一、ETL架构设计优化 1. 分层架构设计 核心分层： 数据源层：对接O…...
30分钟上架鸿蒙原生应用，即时通信IM UI组件库全面适配HarmonyOS 原
自去年 10 月 8 日鸿蒙5开启公测以来，鸿蒙操作系统不断迭代，生态趋向稳健。当前，支持HarmonyOS操作系统的设备数量已超过 10 亿，上架HarmonyOS 5 应用市场的鸿蒙原生应用和元服务已超过2万个。这无疑为广大开发者提供了丰富的应用…...
【虚幻5蓝图Editor Utility Widget：创建高效模型材质自动匹配和资产管理工具，从3DMax到Unreal和Unity引擎_系列第二篇】
虚幻5蓝图Editor Utility Widget 一、基础框架搭建背景：1. 创建Editor Utility Widget2.根控件选择窗口3.界面功能定位与阶段4.查看继承树5.目标效果 二、模块化设计流程1.材质替换核心流程：2.完整代码如下 三、可视化界面UI布局1. 添加标题栏2. 构建滚动…...
机器学习第三篇 模型评估（交叉验证）
Sklearn:可以做数据预处理、分类、回归、聚类，不能做神经网络。原始的工具包文档：scikit-learn: machine learning in Python — scikit-learn 1.6.1 documentation数据集:使用的是MNIST手写数字识别技术，大小为70000，数据类型为7…...
php数据库连接
前言 最近在学习php，刚好学习到了php连接数据库记录一下 总结 //1、与mysql建立连接$conn mysql_connect("127.0.0.1","root","root");//设置编码mysql_set_charset(utf8);//2、选择要操作的数据库mysql_select_db("xuesheng…...
Android Studio学习记录1
Android Studio打包APK 本文为个人学习记录，仅供参考，如有错误请指出。本文主要记录在Android Studio中开发时遇到的问题和回答。 随着学习的深入，项目完成并通过测试之后免不了需要进入打包环节。这篇文章主要记录一下尝试打包APK的过程。我…...
【JAVA ee初阶】多线程（3）
一、出现线程安全的原因 1.【根本原因】线程的调度执行时随机的（抢占式执行）->罪魁祸首 2.多个线程同时修改同一个变量 如果是一个线程修改一个变量 或者 多个线程读取同一个变量 或者 多个线程修改不同变量 这些都没事。 3.修改操作不是原子的&a…...
【Java ee初阶】多线程（4）
一、java是怎么做到可重入的 java中，通过synchronized进行加锁，指定一个（）包含了一个锁对象。（锁对象本身是一个啥样的对象，这并不重要，重点关注锁对象是不是同一个对象） 后面搭配…...
——LeetCode121.买卖股票的最佳时机55.跳跃游戏)
Day15(贪心算法)——LeetCode121.买卖股票的最佳时机55.跳跃游戏
1 LeetCode121.买卖股票的最佳时机(LeetCode121) 1.1 题目描述 题目描述如下: 示例如下： 1.2 问题分析及解决 要求最大利润，即当天与之前天的价格之差最大值。因此我们可以遍历数组，记录下当前遇到的最小值，然后用当天的价…...
2025汽车制造企业数字化转型路径参考
以应用场景作为切入点，引导相关企业推进数字化深度转型和规模化改造，是目前实践探索出来的一条可行路径。 汽车制造行业是相对集聚的制造业领域，通过搭建“转型场景图谱——转型通用工具——转型路径指引”分析框架，聚焦需求侧共…...
雷池WAF的身份认证 - GitHub
雷池支持通过 GitHub 认证的方式，让用户使用 GitHub 身份安全登录应用或网站。使用此功能需要 GitHub 账号 。 第一步：在 GitHub 创建一个 OAuth 应用 可参阅 GitHub 官方文档，创建一个 GitHub OAuth 应用，并获取应用的 ClientI…...
【Linux】第十二章 安装和更新软件包
目录 1. 什么是RPM？ 2. dnf是什么，它和rpm有什么联系和区别？ 3. RHEL 中如何做才能启用对第三方存储库的支持？ 4. 怎么理解RHEL9中的应用流(Application Streams)和模块(Modules)？ 5. RHEL9 有两个必要的软件存储…...
【权限模型】RBAC模型详解
大家好，我是jstart千语。今天给大家介绍一下鉴权模型RBAC，传统的鉴权模式就是基于用户和权限之间的多对多关系。而RBAC就更加的精准，更好管理。 RBAC介绍 RBAC（Role-Based Access Control）是一种通过角色（…...
tree命令
tree [选项] [目录...] 指定要显示的目录。如果没有指定目录，tree 会显示当前目录及其子目录结构。 常用选项 -a 显示所有文件和目录，包括隐藏文件（以 . 开头的文件）。 -d 只显示目录，不显示文件。 -L LEVEL …...
【Vue.js】组件数据通信：基于Props 实现父组件→子组件传递数据（最基础案例）
概览 前言父子通信流程关键技术点关键规则 实战1. 在父组件中注册子组件2. 子组件接收父组件传入的数据补充与总结 前言 在 Vue 3 中，父组件向子组件传递数据是通过props实现的。父组件在子组件的标签上绑定数据，子组件通过定义props接收这些数据。这种…...
信创时代技术栈选择与前景分析：国产替代背景下的战略路径与实践指南
🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...
Python内置方法干货总结
如果你还在为提升Python代码能力发愁，那么掌握内置方法就是你的捷径！很多初学者和进阶者忽略了这一“宝藏”，其实，Python的内置方法不仅能让你代码更简洁，还能大幅提升开发效率。今天，咱们就来一次系统梳理…...
小草GrassRouter多卡聚合路由器聚合卫星、MESH网络应用解决方案
一、多网融合解决方案 卫星网络融合 支持接入卫星通信模块，在无地面网络覆盖的极端场景（如偏远山区、海洋救援）下，形成“5G卫星”双链路冗余传输，卫星链路可作为核心通信备份，确保关键指令和视频数据实…...
Spring反射机制
Spring反射机制 反射机制是加载类时，在运行时动态地获取类的信息，并且可以操作类或对象的属性、方法、构造函数等成员的能力。在 Java 里，反射机制的实现主要依赖于 java.lang.reflect 包下的多个类，以及 java.lang 包中的 Class…...
PCB硬件电路设计_pcb布线设计
1.MCU最小系统电路 这些电路都会非常接近MCU，他们的可靠性决定了MCU能否正常工作。 外围电路，为了布线整齐美观，尽量避免打过多的通孔。在布局的时候走线的顺序和元器件顺序尽可能的保持一直避免走线交叉。 2.晶振电路布线 一般情况下我们…...
Qt开发：XML文件的写入与读取
文章目录 一、使用 QDomDocument操作节点1.1 将信息写入XML文件中1.2.从XML文件中读取信息 二、使用 QXmlStreamWriter操作节点2.1 将信息写入XML文件中2.2 从XML文件中读取信息 三、总结 一、使用 QDomDocument操作节点 1.1 将信息写入XML文件中 #include <QDomDocument&…...
PCI/PXI 总线的可编程电阻卡
701X 系列是阿尔泰科技基于 PCI/PXI 总线的可编程电阻卡，多种电阻范围可选，稳定性好；准确 度低至 0.2%；分辨率设置精细，可低至 0.125Ω，适用于传感器仿真应用。 701X 系列高精度程控电阻模块具有高设置分辨…...
火语言RPA--腾讯云存储
【组件功能】：存储本地文件至腾讯云 选择本地文件，通过腾讯云存储配置上传至腾讯云对象存储的指定地域指定存储桶指定路径。 配置预览 配置说明 SecretId 支持T或# 前往官网获取或创建。参考链接：https://console.cloud.tencent.com/cam/…...
使用POI和EasyExcel使用导入
1.使用POI导入 1.1导入依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>4.1.2</version></dependency> 1.2创建工具类 package com.ruoyi.common.utils.poi;import org.ap…...