微信小程序自定义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、微信小程序是一个免除下载安装直接使用的应用，使用微信【扫一扫】或者是【搜一搜】就可以打开应用。

2、微信小程序如今存在线下扫码、公众号关注、消息通知等多种功能。

3、在微信小程序中，可以向有所了解的技术员寻求帮助。他们会为客户查找微信小程序源码，这样我们就可以看到微信小程序源码了。

4、现如今各大企业项目公司都会培养一些专业的工作人员。他们会运用现有的技术查看源码。

5、查找小程序源码很简单，并且该源码会跟销售产品量成正比关系。

6、给我们的信息可以告诉我们查看微信小程序源码很有必要且又很有重要性。

7、对于查看微信小程序源码以及它的价值，跟客户需求量很有关系。

8、如今网络市场发展十分迅速，微信小程序就是其中一个热门市场点，查看源码就是微信小程序最重要的地方。

---