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

uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

news 来源：原创 2025/6/3 0:05:08

实现效果如图
在这里插入图片描述

抽成组件navbar.vue，放入分包

<template><view class="header-nav-box":style="{'height':Props.imgShow?'':statusBarHeight+'px','background':Props.imgShow?'':Props.bgColor||'#ffffff;'}"><!-- 是否使用图片背景 false --><image v-if="Props.imgShow||false" :src="imgUrl||'../../static/flower.jpg'" mode="scaleToFill"style="width: 100%; height: 400rpx;" /><!-- 导航内容 --><view class="nav-box-item" :style="{'top':capsuleTop+'px','color':Props.textColor||''}"><view class="back" v-if="Props.blackShow||true" ><uni-icons type="back" @click="back" size="18" :color="Props.iconColor||'black'" /><text class="line" /><uni-icons type="home" @click="backToHome" size="18" :color="Props.iconColor||'black'" /></view><view class="title"><block>{{title}}</block></view></view><!-- 自定义内容插槽 --><slot name="content"></slot></view>
</template><script>export default {name: "HeaderNav",data() {return {statusBarHeight:'',capsuleTop:''};},props: {height:{type: String,default: ''},Props: {type: Object,default: () => {}},title: {type: String,default: '默认标题'}},mounted() {var _self=thisuni.getSystemInfo({success: function (e) {let custom = uni.getMenuButtonBoundingClientRect();_self.statusBarHeight = custom.bottom + custom.top - (e.statusBarHeight) + 4},})this.capsuleTop = getApp().globalData.capsuleTop},methods: {// 返回按钮回调函数back() {uni.navigateBack({data: 1})this.$emit('back')},backToHome(){this.$tab.reLaunch('/pages/index') //放入自己的首页路径},}}
</script><style lang="scss">.header-nav-box {position: relative;.nav-box-item {height: 54rpx;position: absolute;display: flex;align-items: center;font-size: 34rpx;width: 100%;.back {width: 23%;padding: 10rpx;justify-content: space-around;display: flex;border-radius: 50rpx;// background-color: #ff8916;border: 1px solid rgba(0, 0, 0, .1);}.title {width: 49%;text-align: center;}}}.home {margin-left: 10rpx;}.line {width: 10rpx;height: 36rpx;background-color: rgba(252, 252, 252, .7);}
</style>

全局引用

// 在main.js引用
// 注册全局组件
import HeaderNav from "./subPackage/navbar/index.vue" //换成你自己的组件位置
Vue.component("HeaderNav", HeaderNav)

使用

<HeaderNav title="你自己的页面路由名称"  />
// 可以传入的参数说明
Props: {imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色statusBarHeight: "", //导航高度(动态获取传参)bgColor: "", //导航栏背景色,不传参则默认#9CFcapsuleTop: "", //胶囊顶部距离(动态获取传参)textColor: "", //导航标题字体颜色(不传默认#FFF)iconColor: "", //icon图标颜色(不传默认#FFF)blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)backText: "", //默认字体(返回)
},

uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

实现效果如图抽成组件navbar.vue，放入分包 <template><view class"header-nav-box":style"{height:Props.imgShow?:statusBarHeightpx,background:Props.imgShow?:Props.bgColor||#ffffff;}"><!-- 是否使用图片背景 false…...

编程日记 2025/6/3 0:05:08

小程序项目的基本组成结构

分类介绍项目根目录下的文件及文件夹 pages文件夹用来存放所有小程序的页面，其中每个页面都由4个基本文件组成，它们分别是： .js文件：页面的脚本文件，用于存放页面的数据、事件处理函数等 .json文件：…...

编程日记 2025/6/2 16:41:24

2020年国赛高教杯数学建模E题校园供水系统智能管理解题全过程文档及程序

2020年国赛高教杯数学建模 E题校园供水系统智能管理原题再现校园供水系统是校园公用设施的重要组成部分，学校为了保障校园供水系统的正常运行需要投入大量的人力、物力和财力。随着科学技术的发展，校园内已经普遍使用了智能水表，从而可以…...

编程日记 2025/6/2 23:38:49

《C++与 OpenCV 机器学习模块：目标检测的强大融合》

在当今科技飞速发展的时代，目标检测技术已经成为计算机视觉领域的一颗璀璨明珠，广泛应用于安防监控、自动驾驶、智能图像分析等众多领域。而 C语言凭借其高效性和强大的性能，与 OpenCV 的机器学习模块相结合，为实现精准且高效的目…...

编程日记 2025/6/2 23:30:03

函数与模块

目录 1.函数 1.1.函数概念 1.2.函数定义 1.3.函数分类 1.4.函数参数类型 1.4.1.位置参数 1.4.2.关键字参数 1.4.3.默认值参数 1.4.4.可变参数 1.5.匿名函数 1.6.参数传递问题 2.冒泡排序 2.1.冒泡排序规则 2.2.冒泡排序实现 3.math 模块 4.random 模块 5.date…...

编程日记 2025/6/2 22:55:32

SQL面试题——滴滴SQL面试题取出累计值与1000差值最小的记录

滴滴SQL面试题取出累计值与1000差值最小的记录今天的题目来自滴滴出行已知有表cost_detail包含id和money两列，id为自增，请累加计算money值，并求出累加值与1000差值最小的记录。 +-----+--------+ | id | money | +-----+--------+ | 1 | 200 | | 2 | 300 …...

编程日记 2025/6/2 23:26:05

使用 Elastic 和 Amazon Bedrock 制作混合地理空间 RAG 应用程序

作者：来自 Elastic Udayasimha Theepireddy (Uday), Srinivas Pendyala, Ayan Ray 借助 Elasticsearch 及其向量数据库，你可以构建可配置的搜索和可信的生成式 AI (GenAI) 体验，这些体验可快速从原型扩展到生产。主要功能包括： 内…...

编程日记 2025/6/2 23:26:05

计算机软著个人申请指南

笔者最近申请了两本软著证书，结合自己的经历介绍一下。软著登记网址：中国版权业务登记平台准备工作你的项目源码源代码统计工具 source-codes-trim：笔者开发自用的源码处理工具vscode插件其他的可以自己在网上搜资源 Word 申请流程注…...

编程日记 2025/6/2 23:54:17

OmniParser一种用于增强视觉语言模型与用户界面交互效果的技术

OmniParser一种用于增强视觉语言模型与用户界面交互效果的技术 OmniParser的核心功能是将用户界面截图转换为结构化元素，这一过程涉及几个关键步骤和技术要素，解决了视觉语言模型（VLMs）在与用户界面交互时所面临的多种挑战。 1.…...

编程日记 2025/5/31 10:55:28

HBU深度学习作业10-BPTT

1、推导BPTT 2、推导梯度 3、分析其可能存在梯度爆炸的原因并给出解决方法为了改善循环神经网络的长程依赖问题，一种非常好的解决方案是在公式(6.50)的基础上引入门控机制来控制信息的累积速度，包括有选择地加入新的信息，并有选择地遗忘之…...

编程日记 2025/5/29 13:21:27

文章目录 MindSearch部署实践部署MindSearch到 hugging face Spaces上启动MindSearch启动后端启动前端部署到自己的 HuggingFace Spaces上部署MindSearch streamlit版本到Hugging Face上 MindSearch部署实践部署MindSearch到 hugging face Spaces上在Codespaces上选择Bla…...

编程日记 2025/6/2 1:19:29

CentOS 7 上安装 MySQL 8.0.40 （二进制安装）

要在 CentOS 7 上安装 MySQL 8.0.40，按照以下步骤操作： 下载安装包。 https://dev.mysql.com/downloads/mysql/ 下载之前查看系统c版本解压安装包首先，解压下载的 .tar.xz 安装包。 cd /path/to/your/downloads tar -xvf mysql-8.0…...

编程日记 2025/6/2 22:52:24

应用案例 | 船舶海洋：水下无人航行器数字样机功能模型构建

水下无人航行器数字样机功能模型构建一、项目背景为响应水下装备系统研制数字化转型及装备系统数字样机建设的需要，以某型号水下无人航行器（Underwater Unmanned Vehicle，UUV）为例，构建UUV数字样机1.0功能模型。针对…...

编程日记 2025/6/2 9:24:34

Chromium CDP 开发（六）：注册自己的指令（下）

引言在这一章节中，我们将详细讲解如何将新定义的 TimerSend 指令和 TimerLog 事件添加到项目的 inspector_protocol_config.json 文件中，从而使这些功能能够在 CDP（Chrome DevTools Protocol）中被识别并正常使用。 inspector_pr…...

编程日记 2025/6/2 4:51:10

【基础算法总结】哈希表/set/map篇

目录一，哈希表简介二，算法原理和代码实现1.两数之和349.两个数组的交集面试题01.02.判断是否互为字符重排217.存在重复元素219.存在重复元素II692.前k个高频单词45.字母异位词分组三，算法总结一，哈希表简介哈希思想是算法中一…...

编程日记 2025/6/2 11:03:10

数字逻辑理论题目+知识点复习

昨天考完的数字逻辑理论考试，啊啊啊还有实验，生活不易，且行且珍惜。请以最大的善意对待生活(,,>᎑<,,)。...

编程日记 2025/5/31 21:20:33

证明网络中的流形成一个凸集

证明网络中的流形成一个凸集步骤1：定义和符号步骤2：线性组合步骤3：验证容量限制步骤4：验证流量守恒结论示例代码（C语言） 在网络流理论中，一个流 f f f 是定义在网络图的边集上的一种函数&…...

编程日记 2025/6/2 13:54:48

SpringBoot3

1. 配置文件 1. 基本使用使用配置文件classpath:application.properties spring.jdbc.drivercom.mysql.cj.jdbc.Driver spring.jdbc.urljdbc:mysql://localhost:3306/batis spring.jdbc.usernameroot spring.jdbc.password123456使用配置文件的值：Value("…...

编程日记 2025/6/2 9:34:36

Linux之线程概念，理解和控制

Linux之线程概念，理解和控制一.线程1.1线程的概念1.2线程的理解1.3线程的优缺点，异常和用途1.4线程和进程1.5线程的控制1.4.1线程的创建1.4.2线程的终止1.4.3线程的等待1.4.4线程的分离一.线程 1.1线程的概念在我们了解了进程的同时我们在学校上课时…...

编程日记 2025/6/1 2:47:24

系统监控——分布式链路追踪系统

摘要本文深入探讨了分布式链路追踪系统的必要性与实施细节。随着软件架构的复杂化，传统的日志分析方法已不足以应对问题定位的需求。文章首先解释了链路追踪的基本概念，如Trace和Span，并讨论了其基本原理。接着，文章介绍了SkyWa…...

编程日记 2025/5/30 8:45:02

【Leetcode Top 100】146. LRU 缓存

问题背景请你设计并实现一个满足 LRU (最近最少使用) 缓存约束的数据结构。实现 LRUCache 类： LRUCache(int capacity) 以正整数作为容量 c a p a c i t y capacity capacity 初始化 LRU 缓存int get(int key) 如果关键字 k e y key key 存在于缓存中&…...

编程日记 2025/6/2 7:46:59

Ubuntu Server 22.04.5 LTS重启后IP被重置问题

Ubuntu Server 22.04.5 LTS重启后IP被重置问题最近在使用Ubuntu Server 22.04做项目开发测试时发现每次重启和关机后，所设置的静态IP地址都会回复到安装系统时所设置的ip Ubuntu Server 22.04 官网下载地址：Ubuntu官方下载地址对虚拟机下安装Ubuntu感…...

编程日记 2025/5/30 17:06:57

电机功率、电压与电流的换算方法

在电气工程和相关行业中，电机的功率、电压和电流是三个重要的基本参数。它们之间有着密切的关系，而理解这些关系对于电机的选型、设计和应用至关重要。本文将详细阐述这三者之间的换算关系，以及相关公式的应用。一、电机功率的定义电机功…...

编程日记 2025/5/30 8:39:00

【Java】反射简介

框架的核心和架构师的核心反射和代理是重中之重反射反射的作用在运行的时候由代码获取类的信息三种获取类信息的方式： 对象.getClass()Class.forName("类的路径")类.class Class ：一个用来存储类信息的类获取类信息是获取的整体的…...

编程日记 2025/5/29 10:24:16

【JAVA】Java第十三节：String类（String相关方法，以及StrinBuftrer , StringBulder相关方法）

本文详细介绍了String类以及常用的String相关方法，以及StrinBuftrer , StringBulder相关方法的使用，建议有印象即可，不需要都记住，使用时去查取即可一、创建一个String类型的变量我们平时创建String类型的变量一般是第一种形式…...

编程日记 2025/5/30 18:09:53

电子信息工程自动化基于单片机的出租车计价器设计

摘要出租车作为一种城市中非常重要的公共交通工具，他与人们的生活息息相关。所以我也设计了一款出租车计价器，它采用模块化设计，包含里程测量模块、数据存储模块、按键模块、时钟模块、显示模块、语音播报模块六大主要模块。本设计的出租车…...

编程日记 2025/6/1 9:12:00

CentOS 二进制安装部署MongoDB 4.0

一、安装MongoDB 1. 下载 MongoDB 二进制文件前往 MongoDB 官方下载页面(https://www.mongodb.com/try/download/community) 选择对应版本的 tar 包。 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.28.tgz 2. 解压并移动至目标目录解压文件&#xff…...

编程日记 2025/5/29 22:03:22

SQL面试题——京东SQL面试题合并数据

京东合并数据几天的题目来自知名电商平台京东已知有数据A如下，请分别根据A生成B和C。数据A +-----+-------+ | id | name | +-----+-------+ | 1 | aa | | 2 | aa | | 3 | aa | | 4 | d | | 5 | c | | 6 | aa | | 7 | aa | | …...

编程日记 2025/6/1 9:32:24

windows安装使用conda

在Windows系统上安装和使用Conda的详细步骤如下： 一、下载Conda安装包访问Conda的官方网站Anaconda | The Operating System for AI，点击“Downloads”按钮。在下载页面，选择适合您系统的安装包。通常，对于Windows系统&#xf…...

编程日记 2025/5/30 16:12:05

C++知识整理day4内存管理——new和delete详解

文章目录 1.C/C内存分布2.C语言中动态内存管理：malloc/realloc/calloc3.C内存管理方式3.1 new/delete操作内置类型3.2 new和delete操作自定义类型 4.malloc/free和new/delete到底什么区别？4.1 对于自定义类型4.2 对于自定义类型4.3 总结：它们…...

编程日记 2025/6/1 9:11:40

STM32 自学笔记

摘抄于大学期间记录在QQ空间的一篇自学笔记，当前清理空间，本来想直接删除掉的，但是感觉有些舍不得，因此先搬移过来。 RAM vs ROM vs FLASH 2013-09-05记录，ROM和RAM指的都是半导体存储器，ROM是Read Only …...

编程日记 2025/5/29 10:17:56

spring通过RequestContextHolder获取HttpServletRequest对象

1.获取HttpServletRequest对象方法： public static HttpServletRequest getRequest() {ServletRequestAttributes attributes ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes());assert attributes ! null;return attributes.getRequest(…...

编程日记 2025/5/28 7:20:29

【特殊子序列 DP】力扣1137. 第 N 个泰波那契数

泰波那契序列 Tn 定义如下： T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n，请返回第 n 个泰波那契数 Tn 的值。示例 1： 输入：n 4 输出：4 解释： T_3 0 1 1 2 T_4 1 …...

编程日记 2025/6/2 6:05:33

tcp连接设置一个超时时间（没在操作系统层面设置）

await asyncio.open_connection(ip, port, limit1024)代码是使用了操作系统的TCP连接，正常TCP连接的时候会有重试机制，当第一个SYN没有回复的时候，会再重试4次，每次间隔1s, 2s，4s, 8s，我觉得太慢了&#xf…...

编程日记 2025/5/31 4:05:20

03、Node.js安装及环境配置

1.下载node.js 下载地址：Node.js 2.安装 2.1 自定义安装路径（可以选择默认） 下图根据本身的需要进行，我选择了默认Node.js runtime，然后Next： Node.js runtime ：表示运行环境 npm package mana…...

编程日记 2025/6/2 7:32:04

【FAQ】HarmonyOS SDK 闭源开放能力 —Remote Communication Kit

1.问题描述： DynamicDnsRule有没有示例？这个地址是怎么解析出来 https://developer.huawei.com/consumer/cn/doc/harmonyos-references/remote-communication-rcp-0000001770911890#section8160554134811 解决方案： ‘DynamicDnsRule’&a…...

编程日记 2025/6/1 7:18:37

WebStorm快捷键保持跟Idea一致

修改连续行局部多选在WebStorm中同时按下ctrl alt s； 选择KeyMap 输入Column Selection Mode选择快捷键, 右键选择Add Mouse Shortcut 按下alt 鼠标左键如果出现占用的情况，直接删除其他使用该快捷键的地方即可； 修改跨行局部多选在…...

编程日记 2025/6/1 19:29:38

14、鸿蒙学习——管理通知角标

针对未读的通知，系统提供了角标设置接口，将未读通知个数显示在桌面图标的右上角角标上。通知增加时，角标上显示的未读通知个数需要增加。通知被查看后，角标上显示的未读通知个数需要减少，没有未读通知时&#xff0…...

编程日记 2025/5/31 10:55:29

【词向量表示】Word2Vec原理及实现

文章目录 Word2VecHow achieveLookup tableCodingPre-dataingModelNegative sameple Word2Vec 单词与单词之间的向量往往不在同一个向量空间，例如，传统的编码方式：one-hot编码，不同单词[1, 0, 0]和[0, 1, 0]之间的余弦相似度为0。…...

编程日记 2025/5/29 5:36:01

【C++】位图

Ⅰ、bitset的介绍位图： 就是用比特位来标识某种状态，适用于海量数据，数据无重复的场景。通常是用来判断某个数据存不存在的。位图的接口： 成员函数功能 set 设置指定位或所有位 reset 清空指定位或所有位 flip …...

编程日记 2025/5/30 1:54:46

性能测试需求分析（超详细总结）

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快 1、客户方提出客户方能提出明确的性能需求，说明对方很重视性能测试，这样的企业一般是金融、电信、银行、医疗器械等；他们…...

编程日记 2025/5/31 10:36:52

React开发 - 技术总结系列二

HOC 初体验高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。简单点说，就是组件作为参数，返回值也是组件的函数&#x…...

编程日记 2025/6/2 3:57:12

Spring事务实现原理

我们一般将Spring事务使用在数据库操作上面，用来保证数据的一致性和完整性实现原理： 通过AOP和事务管理器实现的 1.AOP拦截： 拦截Transactional注解的方法调用 2.事务管理器： 负责事务的开启，提交和回滚 3.事务…...

编程日记 2025/6/2 2:33:31

云服务器部署upload-labs-docker（文件上传靶场）环境以及相关报错问题

环境的搭建准备：云服务器（本地的linux服务器（版本最好不要是老的不然不兼容docker）） f8x配置docker环境： https://github.com/ffffffff0x/f8x 一键配置 docker拉取file-labs靶场 https://github.com…...

编程日记 2025/5/28 17:48:30

Python进阶编程总结

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，…...

编程日记 2025/6/2 3:00:55

【第 1 章初识 C 语言】1.8 使用 C 语言的 7 个步骤

目录 1.8 使用 C 语言的 7 个步骤 1.8.1 第 1 步：定义程序的目标 1.8.2 第 2 步：设计程序 1.8.3 第 3 步：编写代码 1.8.4 第 4 步：编译 1.8.5 第 5 步：运行程序 1.8.6 第 6 步：测试和调试程序 1.8.…...

编程日记 2025/5/31 15:38:00

vue3 实现音频转文字组件

使用recorder-core第三方插件实现音频转纯文本的功能。工具类文件 recoder.ts import Recorder from recorder-core import recorder-core/src/engine/wav import recorder-core/src/extensions/lib.fft.js import recorder-core/src/extensions/frequency.histogram.view i…...

编程日记 2025/6/1 22:30:54

MySQL各种锁详解

什么是锁？ 1.1 锁的解释计算机协调多个进程或线程并发访问某一资源的机制。 1.2 锁的重要性在数据库中，除传统计算资源（CPU、RAM、I/O等）的争抢，数据也是一种供多用户共享的资源。如何保证数据并发访问的一致性&…...

编程日记 2025/5/30 13:32:25

前端工程 Node 版本如何选择

1. Node 与 Npm 版本对应这是一个必知必会的问题，尤其是对于维护那些老掉牙、一坨坨、非常大的有着长期历史的老破大工程。 1.1. package-lock.json 版本首先你要会看项目的 package-lock.json 文件中的 lockfileVersion 版本号，这对于 NPM 安装来说…...

编程日记 2025/6/1 14:50:21

新增白名单赋予应用安装权限

目录相关问题具体实现相关问题安装app到/data/分区时，如何在安装阶段就赋予权限，无需请求权限具体实现 frameworks/base/core/res/res/values/config.xml <string-array translatable"false" nam…...

编程日记 2025/5/28 20:08:30

抽成组件navbar.vue，放入分包

全局引用

使用

相关文章：