您当前的位置: 首页 > 知识百科 > 小程序修改导航栏颜色怎么做?

小程序修改导航栏颜色怎么做?

时间:2023-07-01 14:05 阅读数:125 人阅读 分类:知识百科

  小程序修改导航栏颜色怎么做?在小程序开发中,很多人都会羡慕别人的小程序导航栏颜色非常好看,也希望自己的小程序变得好看,那么怎么做呢?小编给大家仔细介绍小程序修改导航栏颜色怎么做。

  首先大家自己要把小程序的头部标题设置好,然后我们来看看底部导航栏颜色设置怎么做。

  首先我们先来看个示例图:

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

  小程序修改导航栏颜色怎么做?

  第一步:图标准备

  首先我们进图标库,选择我们自己喜欢的图标并下载下来。

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

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

  第二步:更改配置文件

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

  这里小编给大家解释一下对应的属*信息:

  tabBar 指底部的导航配置属*

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

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

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

  list 导航配置数组

  selectedIconPath 选中时图标路径

  iconPath 未选择时图标路径

  pagePath 小程序页面访问地址

  text 导航图标下方文字

  好了,设置完后保存小程序编译就可以看到上面的效果了。是不是非常简单呢?

  以上就是小编给大家搜集的小程序修改导航栏颜色怎么做的全部内容了,希望可以帮到大家。从上面的介绍中不难看出,小程序修改导航栏颜色的方法很简单,大家赶快去试试吧。更多精彩尽在微小乔!

相关推荐:

微信小程序隐藏导航条怎么实现?

微信小程序导航菜单怎么开发?

微信小程序导航配置怎么弄