uniapp 导航栏添加uni-cons图标按钮

效果如下:

导航栏使用uni-icons 图标

步骤:

1、 下载uni-icons插件

      方式一:找到uni-icons组件:扩展组件uni-ui  -》 uni-icons 点击下载或安装,点击使用HBuder 导入插件,输入hbuhuier账号密码,即可下载到项目uni_modules 目录下

方式二:直接下载包拷贝到指定目录

    复制uniicons.ttf文件,放在static目录下。

 2、配置页面,

      该配置在page.json里,在此页面下配置,记得加 \u

      打开pages.json页面,进行如下配置。 fontSrc 填写static下的uniicons.ttf地址,注意写准确。 text 填写图标的名字。

配置页面

3、找到想要的图标

打开官网找到想要的图标,例如:upload,再找到刚下载的插件,找icons.js。

打开icon.js,搜索刚刚看到的图标名字:,需要的是unicode,然后在页面配置的"text"中写成"\ue68e"这样的格式。注意要写\u 


4、绑定事件

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容