微信小程序如何自定义底部tabbar功能？

本文共计390个文字，预计阅读时间需要2分钟。

1) 实现效果： - 创建自定义微信小程序底部导航栏，展示文档列表。

2) 实现原理： - 利用微信小程序自定义组件技术，定义tabBar样式和逻辑。

3) 实现步骤： - 在app.json中设置tabBar的custom字段为true。 - 在app.json的tabBar项中指定custom字段，并补充完整配置。例如： json tabBar: { custom: true, color: #000000, selectedColor: #ff0000, list: [ { pagePath: pages/document/document, text: 文档 }, { pagePath: pages/more/more, text: 更多 } ] }

1）：实现效果：

2）：实现原理：自定义tabBar微信开放文档

3）：实现步骤

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

"tabBar": { "custom": true, "color": "#39b54a", "selectedColor": "#39b54a", "borderStyle": "white", "backgroundColor": "#fff", "box-shadow": "0 0 6px 0", "list": [ { "pagePath": "pages/index/index", "iconPath": "static/images/home.png", "selectedIconPath": "static/images/home@selected.png", "text": "首页" }, { "pagePath": "pages/catalog/catalog", "iconPath": "static/images/home.png", "selectedIconPath": "static/images/home@selected.png", "text": "分类" } ] }

在代码根目录下添加入口文件

编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。

另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

要在这些自定义tabbar页的onShow中调用以下代码：

if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 // 1 不是固定值 根据自己分类而定 }) }

戳我查看>更多开源封装组件

---

人生无常大肠包小肠