微信小程序开发教程-案例:实现底部 tabBar 切换按钮 作者:马育民 • 2026-06-21 15:32 • 阅读:10009 # 介绍 仿造微信底部按钮实现,如下图: [](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