- 微信小程序 tabBar 文档
- 这边以新项目为例，刚创建项目是没有 tabBar 的：
- 如果我们需要加上 tabBar 的支持，我们需要找到
app.json文件
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/dzm/dzm", "pages/test/test" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ddd", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "white", "backgroundColor": "#000" }, "style": "v2", "sitemapLocation": "sitemap.json" }
- 在 app.json 文件里面添加 tabBar 的配置即可：
如果想要一进来选中第几个 tabBar 上面的木块，只需要将它的路由链接放在 pages 第一位就行了，就列入我一小程序就需要选中首页，我就将 "pages/index/index" 放在 pages 的第一位，这样就能一进来默认就打开的是首页了：
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/dzm/dzm", "pages/test/test" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ddd", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "white", "backgroundColor": "#000" }, "tabBar": { "color": "#000", "selectedColor": "#ccc", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tabBar0.png", "selectedIconPath": "images/tabBarSelect0.png" }, { "pagePath": "pages/dzm/dzm", "text": "dzm", "iconPath": "images/tabBar1.png", "selectedIconPath": "images/tabBarSelect1.png" }, { "pagePath": "pages/logs/logs", "text": "测试", "iconPath": "images/tabBar2.png", "selectedIconPath": "images/tabBarSelect2.png" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
- Demo 效果，我这边就没有去找 icon 图片了，所以就是看不到的，自己加个图片就行了。
- tabBar 还可以通过放在顶部，通过调整 position 即可
position：tabBar 的位置，仅支持 bottom / top，默认 bottom，当设置为 top 的时候，icon 就会失效
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/dzm/dzm", "pages/test/test" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ddd", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "white", "backgroundColor": "#000" }, "tabBar": { "color": "#000", "selectedColor": "#ccc", // 设置为顶部 "position": "top", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/dzm/dzm", "text": "dzm" }, { "pagePath": "pages/logs/logs", "text": "测试" } ] }, "style": "v2", "sitemapLocation": "sitemap.json" }
- Demo 效果
