微信小程序开发系列（五）·小程序配置文件详细介绍·tabbar配置以及页面配置_微信小程序 tabbar

零基础手把手教你创建微信小程序（四）·小程序配置文件详细介绍·pages配置以及window配置-CSDN博客

目录

1.  全局配置-tabbar配置

2.  页面配置

---

1.  全局配置-tabbar配置

tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

代码示例：

{
  "entryPagePath": "pages/index/index",
  "pages": [
    "pages/index/index",
    "pages/cate/cate",
    "pages/cart/cart",
    "pages/profile/profile"
  ],
  "window": {
    "navigationBarTitleText": "慕尚花坊",
    "navigationBarBackgroundColor": "#f3514f",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle":"dark"
  },
  "tabBar": {
    "selectedColor": "#f35114f",
    "color": "#666",
    "backgroundColor": "#efefef",
    "borderStyle":"black",
    "position": "top",
    "list": [
      {
        "text":"首页",
        "pagePath": "pages/index/index",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "text":"分类",
        "pagePath": "pages/cate/cate",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "text":"购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "text":"我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },
 
 
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

其中

        "iconPath": "",

        "selectedIconPath": ""

双引号内的内容根据自己准备的图片进行编写，若是不写图片最终展示效果为：

2.  页面配置

        小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是：页面配置文件的属性和 全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项，页面中配置项 会覆盖全局配置文件中相同的配置项。

找到对应模块的.json文件：

代码部分可以参考window配置：

零基础手把手教你创建微信小程序（四）·小程序配置文件详细介绍·pages配置以及window配置-CSDN博客