首页 > 其他分享 >northwest uniapp: 顶部导航栏右侧添加uni-icons图标,并绑定点击事

northwest uniapp: 顶部导航栏右侧添加uni-icons图标,并绑定点击事

时间:2024-03-04 09:00:45浏览次数:25  
标签:uniapp 插件 icons static northwest uni 页面 图标

image

说明

该配置按页面配置,无法全局配置

使用方法

引入uni-icons插件

插件地址:点击此处跳转到uni-icons

引入以后,会发现uni-modules中新增如下目录和文件:

仅需要那个 uniicons.ttf 文件,不引入插件、单独把那个文件下载到本地也是可以的。

复制uniicons.ttf文件到static目录下

不知道为什么非要放进去,直接写node_modules路径好像不管用,所有的静态资源都往static里面扔了。

也有可能是我路径没写对(这事儿我常干)

配置页面

pages.json
image

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

text 填写图标的名字。

找到想要的图标

打开官方文档,上面可以看到图标的名字。

再打开uni_modules/uni-icons/components/uni-icons目录,就是刚刚导入插件的目录
image
打开icon.js,搜索刚刚看到的图标名字:
image
需要的是unicode

然后在页面配置的"text"中写成"\ue6be"这样的格式。

绑定点击事件

在配置的页面vue文件中添加如下代码:
image
如图所示,该事件与onshow、onready、method等同级。

标签:uniapp,插件,icons,static,northwest,uni,页面,图标
From: https://www.cnblogs.com/duixue/p/18051115

相关文章

  • uniapp-微信小程序分享给好友和朋友圈功能
    uniapp-微信小程序分享给好友和朋友圈功能:https://blog.csdn.net/Anorry/article/details/135077095?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-135077095-blog-80295684.235%5Ev43%5Epc_blog_bottom_......
  • uniapp 小程序 request.js 文件书写
    uniapp小程序request.js文件书写:https://blog.csdn.net/weixin_46479579/article/details/124431422?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-16-124431422-blog-132159578.235^v43^pc_blog_bottom_relevance_base9&spm=1001......
  • uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
    uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法:https://blog.csdn.net/qq_37860634/article/details/131226906?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170917383916800225594144%2522%252C%2522scm%2522%253A%252220140713.130102334.pc......
  • Uniapp商城小程序源码+运行实例+下载资源包全开源
    商城小程序源码是一种可以用来开发商城类小程序的代码文件或项目,它包含了商城小程序的基本功能和界面设计等内容。通过使用商城小程序源码,开发者可以节省开发时间和成本,快速构建和定制自己的商城小程序。源码通常包括用户登录、商品浏览、购物车、订单管理、支付功能等,以满足......
  • 解决uniapp项目中使用vant Weapp图标组件报错问题(Module build failed from ./node_mo
    解决uniapp项目中使用vantWeapp图标组件报错问题(Modulebuildfailedfrom./node_modules/postcss-loader/src/index):https://blog.csdn.net/it_cgq/article/details/111991644?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170909210216800225582870%2522%252C%252......
  • uniapp 封装接口并使用
    1.在utils文件夹下新建api.js和httpRequest.js页面httpRequest.js:getApp().globalData.baseUrl='https://xxxxxx';importapifrom"@/utils/api.js";module.exports={httpRequest(url,method,param){vardata=param.data;......
  • 【干货分享】uniapp做的App如何加固
    摘要本文介绍了在2023年,使用uniapp开发APP的盛行趋势,以及随之而来的加固需求。通过对uniapp制作的APP进行代码混淆、加固资源文件、防止调试和反调试、加密敏感数据以及防止篡改等多个方面的加固措施,来保障APP的安全性。引言在当下,uniapp开发APP的兴起让越来越多的开发者受益于......
  • uniapp nvue页面 map地图全屏设置
    因为nvue页面:100vh以及百分比不可用,所以1,可以获取当前屏幕高度然后赋值<map:latitude="latitude":longitude="longitude":style="'height:'+windowHeight*2+'rpx;'"></map>const{windowWidth,windowHeight,appName}=......
  • uniapp-vue2-微信小程序,canvas 裁切图片的代码
    <canvasclass="edit-question-canvas"type="2d"id="canvasCuteImage"></canvas>/*.edit-question-canvas{position:absolute;left:-750rpx;width:690rpx;height:100rpx;}样式随便自己写*/......
  • uniapp之原生APP本地打包成原生APP本地打包安卓APK
    前言由于项目要求将uniapp打包成安卓应用,所以今天来学习如何将uniapp项目打包成安卓apk。出于企业级代码安全考虑,所以选择了原生APP本地打包的方式进行打包,杜绝防止代码泄漏的风险。......