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

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

效果
在这里插入图片描述

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.lryc.cn/news/395190.html

相关文章:

  • Redis原理-数据结构
  • 计算机网络 - 万字长文
  • 基于java+springboot+vue实现的仓库管理系统(文末源码+lw+ppt)23-499
  • 网络安全概述
  • Java传引用问题
  • P8086 『JROI-5』Music
  • 【Java]认识泛型
  • git要忽略对文件的本地修改
  • Linux学习笔记(三)文件权限
  • 自定义类TMyLabel继承自QLabel ,实现mouseDoubleClickEvent
  • 逻辑回归模型(非回归问题,而是分类问题)
  • qt hasPendingDatagrams() 函数
  • 数据结构第08小节:双端队列
  • Python骨架肌体运动学数学模型
  • 二叉树的序列化和反序列化(Java)
  • Java中的泛型类
  • 57、Flink 的项目配置概述
  • 零基础自学爬虫技术该从哪里入手?
  • Vue.js 基础入门指南
  • 山泰科技集团陈玉东:争当数字化时代的知识产权卫士
  • WBCE CMS v1.5.2 远程命令执行漏洞(CVE-2022-25099)
  • 鸿蒙语言基础类库:【@ohos.url (URL字符串解析)】
  • 【AutoencoderKL】基于stable-diffusion-v1.4的vae对图像重构
  • 《警世贤文》摘抄:守法篇、惜时篇、修性篇、修身篇、待人篇、防人篇(建议多读书、多看报、少吃零食多睡觉)
  • vue2+element-ui新增编辑表格+删除行
  • Day05-组织架构-角色管理
  • 【LLM】二、python调用本地的ollama部署的大模型
  • 20240708 每日AI必读资讯
  • 为什么KV Cache只需缓存K矩阵和V矩阵,无需缓存Q矩阵?
  • VS code修改底部的行号的状态栏颜色