微信小程序自定义Tabbar，附详细源码

分享一个完整的微信小程序自定义 Tabbar ，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以耐老直接去底部，博主分享了GitHub地址。

由于微信小程昌段升序自带的 Tabbar 功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件，自己写的样燃汪式，在需要用到的页面引入组件。

组件使用了 position: fixed 定位到底部，所以在用到组件的页面，需要给 page 加上 margin-bottom 样式。

交互是通过在组件上定义的 bindtap 事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的 wx.switchTab 。事件以及传参可以通过 triggerEvent ；

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

1、新建一个微信小程序0607，完成后，大致架构如图。

2、打开app.json，在其中配置topbar，如图，红色部分表示的代码；注意：绿色处的逗号，不可省略。

3、上图代码运行后，即可看到添加的底部导航，如图。

4、在app.json中，再添加一个导航test，需要添加两端代码，如图中的代码1和代码2，运行成功后，会在pages文件夹下出现test文件。

5、给添加图标，要使用 iconPath，selectedIconPath这两个属性。

6、运行后，出现底部导航图标，点击选中的稿枯显示√键蔽洞，如图。

7、如果不喜欢导航放在并竖下面，可以改变position的值，将其放在最上端即可。

---