微信小程序开发教程-案例：实现底部 tabBar 切换按钮-马育民老师

# 介绍

仿造微信底部按钮实现，如下图：

[![](https://www.malaoshi.top/upload/0/0/1GW3XNLdjEUs.png)](https://www.malaoshi.top/upload/0/0/1GW3XNLdjEUs.png)

# 创建页面

创建3-4个页面，空页面即可，略

# 设置 tabBar 按钮

修改 `app.json` 文件，增加 `tabBar` 部分

```
"color": "#999",          // 未选中文字颜色
"selectedColor": "#07C160",// 选中文字颜色
"backgroundColor": "#fff",// 导航栏背景
"borderStyle": "white",   // 上边框 black/white
"position": "bottom",  // 显示底部
"list": [
      {
        "pagePath": "pages/index/index", // 页面路径
        "text": "首页",                  // 文字
        "iconPath": "/images/me.png",    // 图标
        "selectedIconPath": "/images/select-me.png" // 选择的图标
      }
]
```

关键代码如下：

```
"tabBar": {
    "color": "#999",          
    "selectedColor": "#07C160",
    "backgroundColor": "#fff",
    "borderStyle": "white",   
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      },
      {
        "pagePath": "pages/getvalue/getvalue",
        "text": "获取值",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      },
      {
        "pagePath": "pages/discover2/discover2",
        "text": "发现",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      }
    ]
  },
```

### 全部代码

```
{
  "pages": [
    "pages/index/index",
    "pages/discover2/discover2",
    "pages/getvalue/getvalue",
    "pages/me/me",
    "pages/form/form",
    "pages/shuangxiangbangding/shuangxiang",
    "pages/event/event",
    "pages/login/login",
    "pages/test/test",
    "pages/discover/discover",
    "pages/reg/reg",
    "pages/logs/logs",
    "pages/login2/login2"
  ],
  "tabBar": {
    "color": "#999",          
    "selectedColor": "#07C160",
    "backgroundColor": "#fff",
    "borderStyle": "white",   
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      },
      {
        "pagePath": "pages/getvalue/getvalue",
        "text": "获取值",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      },
      {
        "pagePath": "pages/discover2/discover2",
        "text": "发现",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/select-me.png"
      }
    ]
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
```

# 坑

`pages` 数组的第一个页面，必须是 `tabBar` 的 `list` 的之一， **否则不显示tabBar** 按钮
```
"pages": [
    "pages/index/index", // 必须是 tabBar 的 list 的之一
    "pages/discover2/discover2",
    "pages/getvalue/getvalue",
```

原文出处：http://malaoshi.top/show_1GW3XNRTTCm4.html