微信小程序Tabbar

最新推荐文章于 2024-05-31 09:39:48 发布

码码云

最新推荐文章于 2024-05-31 09:39:48 发布

阅读量171

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/cx1361855155/article/details/128070215

版权

本文详细解析了App.json中`tabBar`配置项的使用，包括`color`（未选中时文字颜色）、`selectedColor`（选中时文字颜色）、`borderStyle`（底部边框样式）和`list`（导航配置数组）。`list`数组内包含`pagePath`（页面路径）、`text`（导航文字）以及图标路径等关键参数，用于定义底部导航栏的行为和视觉效果。

摘要由CSDN通过智能技术生成

app.json配置文件

  "tabBar": {
    "color": "#515151",
    "selectedColor": "#42bd56",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/shouye.png",
        "selectedIconPath": "images/shouye_selected.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人",
        "iconPath": "images/wode.png",
        "selectedIconPath": "images/wode_selected.png"
      }
    ]
  },

Tabbar属性解释

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

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

   borderStyle  底部导航边框的样色（只能白色和黑色）

   list   导航配置数组

   selectedIconPath 选中时 图标路径

   iconPath 未选择时 图标路径

   pagePath 选中时页面访问地址

   text  导航图标下方文字Tabbar