微信小程序之tabBar学习

最新推荐文章于 2025-06-26 09:03:02 发布

我是大魔王2

最新推荐文章于 2025-06-26 09:03:02 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签： tabBar 微信小程序

本文链接：https://blog.youkuaiyun.com/mylovewanzi/article/details/79079601

微信小程序开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了微信小程序中tabBar的配置和使用，包括如何在app.json中添加tabBar代码，设置不同状态下的颜色和图标变化。通过示例展示了点击前后字体颜色和图标的变化，并提供了相关代码实现。

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

微信小程序之tabBar学习

01在哪里添加tabBat代码

示例：代码应该写在app.json里
app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的 app.json ：

{
  "pages":[
    "pages/index/index",
    "pages/text/text",
    "pages/test/test",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color":"#ccc",
    "selectedColor":"black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"images/p1.png",
        "selectedIconPath":"images/p4.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/p2.png",
        "selectedIconPath": "images/p5.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "搜索",
        "iconPath": "images/p3.png",
        "selectedIconPath": "images/p6.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

结论：
这里写图片描述

在这里主要tabBar

tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。介绍的是tabBar：

这里写图片描述
其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

02设置点击前颜色和点击后颜色

效果展示：这里展示首页效果
点击前：
这里写图片描述
点击后：

总结：不难看出字体的颜色由灰色变成黑色，黑色代表选中。
实现代码：
“color”:”#ccc”,//之前
“selectedColor”:”black”,//之后
注意：代码必须和list同一级才有效果，也就是tabBar的下一级。

03设置点击前图标和点击之后的icon

效果图02展示，这里也是以首页为代表，可以明显的看出点击之前图标和点击之后图标的不同。
实现代码：
“iconPath”:”images/p1.png”,//之前
“selectedIconPath”:”images/p4.png”//之后
注意：图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片

参考连接：配置小程序