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

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

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

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

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

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

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址：>

先将 iview weapp 的 dist文件夹复制到项目的 static/iview 下（ 这个步骤就不赘述了，不懂的可以留言 ）。

在项目 ( app部分 ) 的 appvue 中加入：

在页面 ( page部分 ) 的文件夹下新建 mainjson 文件，写入：

在页面文件夹的 indexvue 文件里写入：

解决方法：给绑定change事件的元素或组件另外添加@clickstop指向一个空函数，用来阻止冒泡

注：此方法主要用于mpvue，@clickstop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题，项目需要引用小程序的picker选择器组件，发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件（项目需要实现对一个模块进行点击跳转，同时要求模块内的一个子元素有选择器功能）

开始通过查看vue文档和小程序文档，找到两种方法，分别是vue的stop阻止冒泡和小程序的catch前缀，但通过测试发现给change事件直接添加stop或者catch没有用

最后选用了网上搜到的一个折中的方法，给picker选择器另外添加一个点击事件（或者给选择器的父元素添加点击事件），为新加的点击事件添加阻止冒泡方法，使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法，欢迎留言

mpvue基于vue，优化了vue的runtime和compiler实现，以前常用来开发小程序，后来停止维护了。uniapp生态更广，也有云开发，但由于多端兼容，所以有时针对个别平台处理的配置项较多

现在有很多场景需要用到预约类小程序，例如家政服务、摄影、美业、课程学习小程序依托于微信十亿流量的平台，方便快捷、用完即走的特点，让它给服务行业带来了很大的变化。在小程序中查看服务信息，选择服务，这给商家和客户都带来很大便利，既节约了用户等待时间，也方便商家管理。

预约类小程序这么有用，很多服务行业的企业和商家也有了制作自己的小程序的想法，于是纷纷去找简单微信小程序代码，其实这是完全不必要的。现在制作小程序的方法有很多，即使是不懂代码的小白，也能快速生成自己的小程序了。下面就跟大家科普下无需预约小程序源码，就能快速制作小程序的方法。

对于不懂代码的小白来说，目前常用的制作方式是使用零代码小程序制作工具。现在市面上这样的工具很多，但质量良莠不齐，你得从多个方面考虑，包括小程序的模板设计质量、技术团队水平、过往案例效果、功能是否丰富、业界口碑等等。

选好工具后，你就可以制作自己的小程序了。这个过程也很简单，接下来我以「上线了」小程序制作工具为例，给大家演示下如何制作：注册账号后选择“创建小程序”，再选择“服务预订”类别。

然后你会看到一个模板选择页面，选一个喜欢的模板，进入编辑后台。在这里，你可以添加自己的服务项目、服务人员、服务分类。在“预约设置”里你可以设置自己的预约时间、预约人数。

在“风格”里你可以设置小程序的主题色、商品布局模式，添加轮播图，让自己的小程序更具个性化。此外你还能在“功能组件”里开通关联公众号功能，形成自媒体营销闭环，培养稳定的粉丝群体。

做好后点击左下角“立即发布”，按照提示用小程序管理员账号扫描授权（如果没有小程序账号，按照系统提示快速注册一个即可），就大功告成了。

以上就是关于微信小程序自定义Tabbar，附详细源码全部的内容，包括:微信小程序自定义Tabbar，附详细源码、详解mpvue中使用vant时需要注意的onChange事件的坑、mpvue 小程序如何使用 iview weapp 中的 tabbar等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！