|
如题，在uni-app导航栏开发中，如何使用图片按钮。根据反复研读官方文档，最终总结使用图片类按钮的几个步骤。
首先，我们先来看下官方对于自定义导航按钮的配置表格
然后，字体图标我一般是使用的iconfont。根据上图划线的地方，总结使用图标按钮的几个步骤。
1、新建一个临时项目
2、在iconfont找到需要的图标按钮，一个按钮对应一个图标。
记住这里的的字体图标对应的Unicode是。下面配置会说到
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项目的导航按钮 | 
转播
