微信小程序开发之tabBar基本配置

最新推荐文章于 2025-06-02 09:54:28 发布

前端大斗师

最新推荐文章于 2025-06-02 09:54:28 发布

阅读量6.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：小程序 json 大前端

本文链接：https://blog.youkuaiyun.com/Web_chicken/article/details/115939895

web前端专栏收录该内容

79 篇文章

订阅专栏

本文介绍了如何在app.json文件中配置自定义tabBar，包括设置字体颜色、边框颜色及底部导航图标等，实现个性化界面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、tabBar基本配置

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

先附上结构图和源码
在这里插入图片描述

"tabBar":{
    "color":"#000",
    "selectedColor":"#1296db",
    "borderStyle": "black",
    "list":[{
      "pagePath":"pages/posts/posts",
      "text":"阅读",
      "iconPath":"/images/icon/read.png",
      "selectedIconPath":"/images/icon/read_active.png"
    }, {
      "pagePath":"pages/welcome/welcome",
      "text":"我的",
      "iconPath":"/images/icon/mine.png",
      "selectedIconPath":"/images/icon/mine-active.png"
    }]
  }

1.1 配置app.json文件

在和window同级下新建tabBar字段

我们需要了解各个字段的含义

color		//默认的tab字体颜色
borderStyle		//tabBar上边框的颜色（仅支持black、white，默认black）
selectedColor  //选中时的字体颜色
list			// list中有几个对象就代表底部导航有几个(最小为2 最大为5)
list中的pagePath 		// 代表点击图标时要跳转到哪个页面(主要不要以/开头)
list中的text		//代表表示文字
list中的iconPath		//代表未选中状态下的字体图标路径
list中的selectedIconPath		//代表选中状态下的字体图标路径

配置完成后我们看下效果图

在这里插入图片描述