uniapp自定义导航之添加自定义按钮之使用字体图标

4 篇文章 0 订阅
3 篇文章 0 订阅

如题,在uni-app导航栏开发中,如何使用图片按钮。根据反复研读官方文档,最终总结使用图片类按钮的几个步骤。

首先,我们先来看下官方对于自定义导航按钮的配置表格
在这里插入图片描述

然后,字体图标我一般是使用的iconfont。根据上图划线的地方,总结使用图标按钮的几个步骤。

1、新建一个临时项目
在这里插入图片描述
2、在iconfont找到需要的图标按钮,一个按钮对应一个图标。
在这里插入图片描述
记住这里的的字体图标对应的Unicode是&#xe645。下面配置会说到

3、进入项目,下载字体包
4、将*.ttf的字体包放入uniapp下的static文件夹下
在这里插入图片描述
5、在需要自定义导航按钮的页面(eg:index页面)做如下配置。

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uniAPP",
				"app-plus": {
					"titleNView": {  
						"buttons": [{  
							"text": "\ue645",  //倒回顶部,图一说到text的Unicode必须使用\u开头,因此iconfont的Unicode的&#x必须转为\u。否则该图片在h5调试上可以显示,但是在app编译中却无法显示,之前就是吃了这个亏。问了好多人都没得到解答
							"fontSrc": "/static/signIn.ttf", 
							"fontSize": "20px",
							"color": "#007aff"
						}]  
					} 
				}
			}
		}

6、字体图标使用完毕后,删除iconfont上创建的临时项目

以上,就是如何使用iconfont自定义uniapp项目的导航按钮

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值