微信小程序 tabBar不显示问题

最新推荐文章于 2024-10-25 10:45:11 发布

原创最新推荐文章于 2024-10-25 10:45:11 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #tabBar

经验专栏收录该内容

7 篇文章

订阅专栏

本文详细阐述了在微信小程序中遇到的tabBar不显示的问题，包括pages第一项必须在tabBar的list数组中，以及如何在微信开发者工具中正确设置显示比例。

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

tabBar不显示问题

问题1 pages 第一项必须在 tabBar的list数组中
问题2 微信开发者工具显示设置小于100%，85%即可
结果如下图

问题1 pages 第一项必须在 tabBar的list数组中

废话不多说代码

{
  "pages": [
  	// 第一项 内容必须在 tabBar中list数组中的内容
    "pages/home/home",
    "pages/product/product",
    "pages/category/category",
    "pages/my/my",
    "pages/cart/cart"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#AB956D",
    "navigationBarTitleText": "Demo",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
      	// 对应pages的第一项内容
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "imgs/toolbar/home.png",
        "selectedIconPath": "imgs/toolbar/home@selected.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "imgs/toolbar/category.png",
        "selectedIconPath": "imgs/toolbar/category@selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "imgs/toolbar/cart.png",
        "selectedIconPath": "imgs/toolbar/cart@selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "imgs/toolbar/my.png",
        "selectedIconPath": "imgs/toolbar/my@selected.png"
      }
    ]
  }
}