微信小程序中建立底部导航菜单——tabBar

最新推荐文章于 2025-07-17 10:56:54 发布

原创最新推荐文章于 2025-07-17 10:56:54 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

【小程序】专栏收录该内容

16 篇文章

订阅专栏

本文详细解析了微信小程序中app.json文件的tabBar配置项，包括颜色、边框样式及导航列表的具体设置方法，帮助开发者更好地理解并应用底部导航栏。

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

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。相关属性解释如下：

tabBar	底部的导航配置属性
color	未选择时底部导航文字的颜色
selectedColor	选择时底部导航文字的颜色
borderStyle	底部导航边框的样色
list	导航配置数组
text	导航图标下方文字
iconPath	未选择时图标路径
selectedIconPath	选中时图标路径
pagePath	页面访问地址

$\color{red}{注意：}$ borderStyle中如果没有写入样式会导致导航框上边框会出现默认的浅灰色线条，如下图所示：
在这里插入图片描述
相关代码如下所示：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "selectedIconPath": "pages/img/下载.jpeg",
        "iconPath": "pages/img/下载.jpeg"
      },
      {
        "pagePath": "pages/snack/snack",
        "text": "贪吃蛇",
        "selectedIconPath": "pages/img/timg.jpeg",
        "iconPath": "pages/img/timg.jpeg"
      }
    ]
  }