UNIAPP_顶部导航栏右侧添加uni-icons图标,并绑定点击事件,自定义导航栏右侧图标

news2024/10/6 12:26:43

效果
在这里插入图片描述

1、导入插件
uni-icons插件:https://ext.dcloud.net.cn/plugin?name=uni-icons

复制 uniicons.ttf 文件到 static/fonts/ 下
仅需要那个uniicons.ttf文件,不引入插件、单独把那个文件下载到本地也是可以的
在这里插入图片描述
2、配置页面
在这里插入图片描述

"app-plus": {
	"titleNView": {
		"buttons": [
			{
				"color": "#5F3DB8",
				"fontSize": "50rpx",
				"text": "\ue6a4",
				"fontSrc": "static/fonts/uniicons.ttf"
			}
		]
	}
}

fontSrc 填写static下的uniicons.ttf地址,注意写准确。

text 填写图标的名字。可以到此地址查询需要的图片:https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html
在这里插入图片描述

复制需要的图片名称到uniicons_file.ts中搜索,我这里添加的是gift,就把 unicode 的值 \ue6a4 填写到text

在这里插入图片描述
4、绑定点击事件

onNavigationBarButtonTap(e) {
	console.log('自定义按钮被点击')
}

在这里插入图片描述

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

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

相关文章

Hi3861 OpenHarmony嵌入式应用入门--TCP Server

本篇使用的是lwip编写tcp服务端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点,并且密码为PARAM_HOTSPOT_PSK LwIP简介 LwIP是什么? A Lightweight TCP/IP stack 一个轻量级的TCP/IP协议栈 详细介绍请参考LwIP项目官网:lwIP - A Li…

Ollama+OpenWeb UI搭建最简单的大模型交互界面

Open WebUI是一个专为大型语言模型(LLMs)设计的Web用户界面。这个界面提供了一个直观、响应迅速且易于使用的平台,使用户能够与本地运行的语言模型进行交互,就像与云服务中的模型交互一样。可以非常方便的调试、调用本地模型。你能…

Linux运维之管道符、重定向与环境变量

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 目录 一、输入输出重定向 二、管道命令符 三、命令行的通配符 四、常用的转义字符 五、重要的环境变量 致谢 一、输入输出重定向 输入重定向是…

快速下载!Windows 7旗舰版系统:集成所有补丁!

微软对Windows7系统停止支持后,Windows7设备不再收到安全补丁程序、修补程序。尽管如此,许多用户仍然认为Windows7是最好用、最经典的系统。有用户就特别喜欢Windows7旗舰版系统,那么接下来系统之家小编为大家带来的全补丁版本的Windows7系统…

C++精解【10】

文章目录 读写文件概述example csv读文件读取每个字段读取机器学习数据库iris constexpr函数GMP大整数codeblock环境配置数据类型函数类 EigenminCoeff 和maxCoeffArray类 读写文件 概述 fstream typedef basic_fstream<char, char_traits<char>> fstream;此类型…

STM32基本定时器、通用定时器、高级定时器区别

一.STM32基本定时器、通用定时器、高级定时器区别 STM32系列微控制器中的定时器资源分为基本定时器&#xff08;Basic Timer&#xff09;、通用定时器&#xff08;General Purpose Timer&#xff09;和高级定时器&#xff08;Advanced Timer&#xff09;三类&#xff0c;它们在…

类似Jira的在线项目管理软件有哪些?10 个主流的Jira替代方案

10 个 Jira 替代方案&#xff1a;PingCode、Worktile、Teambition、Redmine、Asana、monday.com、Zoho Projects、思码逸、Notion、Airtable。 Jira 是一款流行的项目管理工具&#xff0c;专为产品开发团队而设计。虽然它是一种多功能解决方案&#xff0c;几乎适用于任何类型的…

四、(1)网络爬虫入门及准备工作(爬虫及数据可视化)

四、&#xff08;1&#xff09;网络爬虫入门及准备工作&#xff08;爬虫及数据可视化&#xff09; 1&#xff0c;网络爬虫入门1.1 百度指数1.2 天眼查1.3 爬虫原理1.4 搜索引擎原理 2&#xff0c;准备工作2.1 分析爬取页面2.2 爬虫拿到的不仅是网页还是网页的源代码2.3 爬虫就是…

html+js+css登录注册界面

拥有向服务器发送登录或注册数据并接收返回数据的功能 点赞关注 界面 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Login and Registration Form</title> <style> * …

2024“国培“来也UiBot6.0 RPA数字机器人开发综合应用

前言 (本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~) 国培笔记: 依次读取数组中每个元素 输出调试信息 [ value=[ "vivian", value[0] "老师", "上午好,O(∩_∩)O哈哈~" ], v…

Nuxt3 的生命周期和钩子函数(九)

title: Nuxt3 的生命周期和钩子函数&#xff08;九&#xff09; date: 2024/7/3 updated: 2024/7/3 author: cmdragon excerpt: 摘要&#xff1a;本文介绍了Nuxt3中与Vite相关的五个生命周期钩子&#xff0c;包括vite:extend、vite:extendConfig、vite:configResolved、vite…

贴片电阻:01A、01B、01C、01D分别是什么意思?

贴片电阻的识别方法&#xff1a; 1、数字索位标称法 (一般矩形片状电阻采用这种标称法) 数字索位标称法就是在电阻体上用三位数字来标明其阻值。它的第一位和第二位为有效数字&#xff0c;第三位表示在有效数字后面所加“0”的个数&#xff0e;这一位不会出现字母。例如&…

Lua、AB包热更新总结

1.AB包热更新 &#xff08;1&#xff09;AB包是一种特定的压缩文件&#xff0c;可以放模型贴图音效等等 &#xff08;2&#xff09;Resources目录下打包时只读 无法修改&#xff1b;而AB包存储的位置是自定义的&#xff0c;能够动态更新&#xff0c;同时可以决定资源包初始的大…

用720云搭建数字孪生VR智慧安防系统,赋能安防升级!

“安全防范"一直是我国城镇化发展进程中重点关注的工作板块&#xff0c;随着时代发展需求与科技的日新月异&#xff0c;安防行业正在积极融合VR3D数字孪生技术&#xff0c;升级安防数字基础设施和安防产品服务创新。 今年2月&#xff0c;《数字中国建设整体布局规划》的出…

暑假学习DevEco Studio第一天

学习目标&#xff1a; 掌握构建第一个ArkTS应用 学习内容&#xff1a; 容器的应用 创建流程 点击file&#xff0c;new-> create project 点击empty ->next 进入配置界面 点击finsh&#xff0c;生成下面图片 这里需要注意记住index.ets &#xff0c;这是显示页面 –…

StarRocks 3.3 重磅发布,Lakehouse 架构发展进入快车道!

StarRocks 3.3 的发布标志着 Lakehouse 架构在数据分析领域迈向了一个新的高度。作为下一代 Lakehouse 架构的代表&#xff0c;StarRocks 3.3 在稳定性、计算性能、缓存设计、物化视图、存储优化和 Lakehouse 生态系统等方面进行了全方位的优化和创新。本文将逐一介绍 StarRock…

【多媒体】富客户端应用程序GUI框架 JavaFX 2.0 简介

JavaFX 最初是由 Oracle 推出的一个用于开发富客户端应用程序的框架&#xff0c;它提供了丰富的用户界面控件、布局容器、3D图形绘制、媒体播放和动画等功能&#xff0c;旨在取代较旧的 Swing 框架。JavaFX 于 2007 年推出&#xff0c;2011 年 10 月发布了2.0 版本。JavaFX 2.0…

如何创建移动类型

第一步打开事务代码&#xff1a; OMJJ 下面这个工作区可以不填&#xff0c;或者填入你的范围&#xff08;例如我准备copy Z52成为Z54 那么就可以输入从Z52到Z54&#xff0c;SAP的这个操作就是这么怪&#xff0c;哈哈&#xff09;不然就会出现一个这样的报错“在工作区中指定关…

YOLOv8改进 | 卷积模块 | SAConv可切换空洞卷积

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

[数据集][目标检测]螺丝螺母检测数据集VOC+YOLO格式2400张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2400 标注数量(xml文件个数)&#xff1a;2400 标注数量(txt文件个数)&#xff1a;2400 标注…