如何解决微信小程序导航只有图标问题？

　　有了微信导航栏，想要找到相应的小程序功能页面就要方便很多，有时候看到的微信小程序导航只有图标，这是怎么回事呢?有可能是你自己没有设置好。那让我们再来看设置过程吧。

　　我们先来看个效果图

　　这里，我们添加了三个导航小程序图标，因为我们有三个页面，微信小程序最多能加5个。

　　那他们是怎么出现怎么着色的呢?两步就搞定!

　　1. 图标准备

　　我们进入网站，鼠标滑到一个喜欢的图标上面点击下方的下载按钮

　　在弹出框中选择了俩个不同颜色的图标选择64px大小即可，我选择的是png 然后下载下来 起上别名

　　将上述起好名字的图标 保存到小程序项目目录中 新创建的 images 文件夹中，准备工作就做好了

　　2. 更改配置文件

　　我们找到项目根目录中的配置文件 app.json 加入如下配置信息

　　[html] view plain copy print?

　　"tabBar": {

　　"color": "#a9b7b7",

　　"selectedColor": "#11cd6e",

　　"borderStyle":"white",

　　"list": [{

　　"selectedIconPath": "images/111.png",

　　"iconPath": "images/11.png",

　　"pagePath": "pages/index/index",

　　"text": "首页"

　　}, {

　　"selectedIconPath": "images/221.png",

　　"iconPath": "images/22.png",

　　"pagePath": "pages/logs/logs",

　　"text": "日志"

　　}, {

　　"selectedIconPath": "images/331.png",

　　"iconPath": "images/33.png",

　　"pagePath": "pages/test/test",

　　"text": "开心测试"

　　}]

　　},

　　"tabBar": {

　　"color": "#a9b7b7",

　　"selectedColor": "#11cd6e",

　　"borderStyle":"white",

　　"list": [{

　　"selectedIconPath": "images/111.png",

　　"iconPath": "images/11.png",

　　"pagePath": "pages/index/index",

　　"text": "首页"

　　}, {

　　"selectedIconPath": "images/221.png",

　　"iconPath": "images/22.png",

　　"pagePath": "pages/logs/logs",

　　"text": "日志"

　　}, {

　　"selectedIconPath": "images/331.png",

　　"iconPath": "images/33.png",

　　"pagePath": "pages/test/test",

　　"text": "开心测试"

　　}]

　　},

　　解释一下 对应的属*信息

　　tabBar 指底部的 导航配置属*

　　color 未选择时 底部导航文字的颜色

　　selectedColor 选择时底部导航栏文字的颜色

　　borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

　　list 导航配置数组

　　selectedIconPath 选中时 图标路径

　　iconPath 未选择时 图标路径

　　pagePath 页面访问地址

　　text 导航图标下方文字

　　微信小程序底部想要有一个漂亮的导航栏目，必须要掌握设置方法。以上内容就是解决微信小程序导航只有图标问题的最佳方法。想要获取更多相关资料请关注微信小程序素材网。

　　微信小程序导航栏跳转怎么设置

　　微信小程序导航的icon是什么?怎么开发小程序导航icon?

　　微信小程序头部导航栏设置实例