当前位置: 首页 > news >正文

uniapp-自定义navigationBar

  1. 封装导航栏自定义组件
    创建 nav-bar.vue
<script setup>import {onReady} from '@dcloudio/uni-app'import {ref} from 'vue';const props=defineProps(['navBackgroundColor'])const statusBarHeight = ref()const navHeight = ref()onReady(() => {uni.getSystemInfo({success: (e) => {statusBarHeight.value = e.statusBarHeightconst custom = uni.getMenuButtonBoundingClientRect()navHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2}})})
</script>
<template><view :style="{'background-color': props.navBackgroundColor}"><view :style="{'height':statusBarHeight+'px'}"></view><view class="nav" :style="{'height':navHeight+'px'}"><view class="left"><slot name="left"></slot></view><view class="center"><slot name="center"></slot></view><view class="right"></view></view></view>
</template>
<style lang="scss" scoped>.nav {font-size: 30rpx;height: 100%;padding: 0 30rpx;display: flex;justify-content: space-between;align-items: center;.left {width: 100rpx;}.right {width: 100rpx;}}
</style>
  1. 测试使用自定义导航
<script setup>
const back=()=>{console.log('back')
}
</script><template><nav-bar navBackgroundColor="#efefef"><template #left><text @click="back">返回</text></template><template #center style="color: red;">中间</template>	</nav-bar>
</template><style lang="scss" scoped></style>

在这里插入图片描述

相关文章:

uniapp-自定义navigationBar

封装导航栏自定义组件 创建 nav-bar.vue <script setup>import {onReady} from dcloudio/uni-appimport {ref} from vue;const propsdefineProps([navBackgroundColor])const statusBarHeight ref()const navHeight ref()onReady(() > {uni.getSystemInfo({success…...

多式联运奇迹:探索 GPT-4o 的尖端功能

取得的显着进展的DigiOps与人工智能已经标志着重要的里程碑&#xff0c;随着时间的推移塑造了人工智能系统的能力。从早期基于规则系统的出现机器学习和深入学习&#xff0c;人工智能已经发展得更加先进和通用。 生成式预训练 Transformer (GPT) by OpenAI 已特别值得注意。每…...

前端 CSS 经典:好看的标题动画

前言&#xff1a;好看的标题动画实现。 效果&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><…...

Vue项目打包优化(element+echarts+vue使用cdn)

如何打包查看所有资源大小&#xff1f; 使用插件&#xff1a;webpack-bundle-analyzer 效果图&#xff1a; 安装webpack-bundle-analyzer 第一步&#xff0c;终端执行 npm instatll webpack-bundle-analyzer --save-dev第二步&#xff0c;vue.config.js配置 module.export…...

【ARM 嵌入式 C 入门及渐进 6.1 -- ARMv8 C 内嵌汇编写系统寄存器的函数实现】

请阅读【嵌入式开发学习必备专栏】 文章目录 ARMv8 C 内嵌汇编写系统寄存器 ARMv8 C 内嵌汇编写系统寄存器 在ARMv8架构下&#xff0c;使用C语言结合内嵌汇编实现将一个值写入特定系统寄存器的函数可以按照下面的方法进行。 下面这个示例展示了如何将一个uint64_t类型的值写入…...

ESP32基础应用之使用手机浏览器作为客户端与ESP32作为服务器进行通信

文章目录 1 准备2 移植2.1 softAP工程移植到simple工程中2.2 移植注意事项 3 验证 1 准备 参考工程 Espressif\frameworks\esp-idf-v5.2.1\examples\wifi\getting_started\softAP softAP工程演示将ESP32作为AP&#xff0c;即热点&#xff0c;使手机等终端可以连接参考工程 Esp…...

【课后练习分享】Java用户注册界面设计和求三角形面积的图形界面程序

目录 java编程题&#xff08;每日一练&#xff09;&#xff1a; 问题一的答案代码如下&#xff1a; 问题一的运行截图如下&#xff1a; 问题二的答案代码如下&#xff1a; 问题二的运行截图如下&#xff1a; java编程题&#xff08;每日一练&#xff09;&#xff1a; 1.…...

三维空间坐标系变换(旋转平移)

在探究三维空间下的变换前&#xff0c;首先研究二位空间&#xff0c;因为比较直观&#xff0c;再推广到三维空间。 首先应该清楚的一点是&#xff1a;旋转、平移对于坐标系下的点以及坐标系本身而言都是相对的&#xff08;运动的相对性&#xff09;。 例如&#xff1a; X O Y …...

OC笔记之foundation框架

OC学习笔记&#xff08;三&#xff09; 文章目录 OC学习笔记&#xff08;三&#xff09;常用Foundation框架结构体NSRangeNSRange结构体的定义定义 NSRange 的方法打印Range的相关信息NSRange的实际运用查找子字符串返回NSRange结构体 NSPointNSRect NSStringNSString的创建NSS…...

Docker部署springboot包并联通MySQL

Docker部署jar 实现功能 部署springboot下发布的jar包不同docker容器之间通信&#xff08;如MySQL访问、Redis访问&#xff09;多个jar包部署 参考文献 Just a moment… Just a moment… https://www.jb51.net/article/279449.htm springboot配置 这里使用多yaml配置文件&…...

多帧激光点云基于标定参数进行融合拼接

1、前言 在三维视觉技术蓬勃发展的今天&#xff0c;点云作为捕获和表示三维环境的基础数据形式&#xff0c;扮演着至关重要的角色。点云融合拼接技术&#xff0c;作为连接孤立点云片段、构建连续、全面三维场景的核心过程&#xff0c;对于自动驾驶、机器人导航、三维建模以及地…...

python数据类型之字符串

目录 1.字符串概念和注意事项 2.字符串内置函数 3.字符串的索引、切片和遍历 4.字符串运算符 5.字符串常用方法 性质判断 开头结尾判断 是否存在某个子串 大小写等格式转化 子串替换 删除两端空白字符 格式化字符串 分割与合并 6.字符串模板 7.exec 函数 8.字符…...

Vue3实战笔记(38)—粒子特效终章

文章目录 前言一、怎样使用官方提供的特效二、海葵特效总结 前言 官方还有很多漂亮的特效&#xff0c;但是vue3只有一个demo&#xff0c;例如我前面实现的两个页面就耗费了一些时间&#xff0c;今天记录一下tsparticles官方内置的几个特效的使用方法&#xff0c;一般这几个就足…...

晶体振荡器

一、晶振与晶体区别 晶振是有源晶振的简称&#xff0c;又叫振荡器&#xff0c;英文名称是oscillator&#xff0c;内部有时钟电路&#xff0c;只需供电便可产生振荡信号&#xff1b;晶体是无源晶振的简称&#xff0c;也叫谐振器&#xff0c;英文名称是crystal&#xff0c;是无极…...

单词可交互的弧形文本

在一个项目中&#xff0c;要求把少儿读本做成电子教材呈现出来&#xff0c;电子书的排版要求跟纸质书一致。其中&#xff0c;英语书有个需求&#xff1a;书中有些不规则排版的文本&#xff08;如下图所示&#xff09;&#xff0c;当随书音频播放时&#xff0c;被读到的文本要求…...

Linux——进程信号(一)

1.信号入门 1.1生活中的信号 什么是信号? 结合实际红绿灯、闹钟、游戏中的"&#xff01;"等等这些都是信号。 以红绿灯为例子&#xff1a; 一看到红绿灯我们就知道&#xff1a;红灯停、绿灯行&#xff1b;我们不仅知道它是一个红绿灯而且知道当其出现不同的状况…...

centos9 stream在线安装NVIDIA驱动(rockylinux9.4也成功安装nvidia驱动)

Install NVIDIA Drivers on CentOS Stream 9&#xff08;rockylinux9.4成功&#xff09; 主板为技嘉mz72-hb2 显卡为4090 一.Disable Secure Boot From the BIOS 二.Enabling the EPEL Repository on CentOS Stream 9 1.update the DNF package repository cache sudo dnf …...

springmvc不同格式的参数解析

参数解析 application/x-www-form-urlencoded格式 这种格式就是传统的表单提交格式&#xff0c;就是一个个的键值对&#xff0c;会进行url编码&#xff0c;使用springmvc接收时使用RequestParam来进行接收&#xff0c;与传入的字段一一对应&#xff0c;此时使用的参数处理器是R…...

Unity3D让BoxCollider根据子物体生成自适应大小

系列文章目录 unity工具 文章目录 系列文章目录unity工具 &#x1f449;前言&#x1f449;一、编辑器添加&#x1f449;二、代码动态添加的方法(第一种)&#x1f449;三、代码动态添加的方法(第二种)&#x1f449;四、重新设置模型的中心点&#x1f449;壁纸分享&#x1f449;…...

WSL 2 installation is incomplete.

使用的wsl2版本很旧&#xff0c;因此需要手动更新。 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...