微信小程序自定义tabbar？设置导航栏导航栏TabBar如果我们的小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），那么我们可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。那么，微信小程序自定义tabbar？一起来了解一下吧。
最近做项目的时候，突然来了个小特殊的需求，根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了，这个不是小程序自带的组件么？还要做成动态？这就有点尴尬了.....
不过也只是一时尴尬而已，然后我就展开了搜索之旅.....然后发现，官方的组件确实没办法做动态，那咋办，如果真的有这个需求那也是得去处理滴呀~然后也看了有一些做到这效果的方法，那就试一下呗。其实就是自定义个tabBar的模板，以下是实现：
首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。
然后新建个tabBar.wxml文件，这里就写下你的tabBar的结构。
下面是tabBar所需要用到的样式，我这里就直接写在全局app.wxss了。
然后接下来是js的部分，由于是底部的导航，那肯定是不止一个页面用到的，那这里就可以写在全局的app.js里面方便使用。这里我写了两种tabBar的模板，分别对应来显示
然后在需要用到这个组件的页面上直接调用。比如这里的index页面。
然后去index.js里面调用tabBar
然后下面是效果图。
就这些。我个人觉得这个自定义导航的用户体验不是很好，能不用就不要用，不过知道下方法也是ok滴！如有发现有错或者不足的地方可以指出，谢谢！
1、首先打开微信开发工具，载入需要修改的小程序工程。
2、然后打开app.json页面，在window下写下面的代码，先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。
3、然后在list中设置两个标签，其中使用pagePath和text填写一下点击跳转的路径和选项的名字。
4、最后填写点击前的图标和点击后的图标，这里每个选项用两个颜色图标，可以去找矢量图，尺寸大约在64像素左右，其中iconPath为点击前的图标，而selectedIconPath为点击后的图标。
5、最后设置好后，在左侧的预览就可以看到菜单的样式了：
微信应用号（小程序，「应用号」的新称呼）终于来了！目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？我们暂时以一款简单的第三方工具的实例，来演示一下开发过程吧。序言开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南）本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。1.获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的AppID。利用提供的帐号，登录，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的AppID了。注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份-开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。
设置导航栏
导航栏TabBar
如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。
tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
属性值：
示例：
app.json：
运行：
微信小程序教程系列
相关连接：http://blog.csdn.net/michael_ouyang/article/details/54700871
分享一个完整的微信小程序自定义 Tabbar ，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以直接去底部，博主分享了GitHub地址。
由于微信小程序自带的 Tabbar 功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义 Tabbar 了。
博主创建了一个 Tabbar 组件，自己写的样式，在需要用到的页面引入组件。
组件使用了 position: fixed 定位到底部，所以在用到组件的页面，需要给 page 加上 margin-bottom 样式。
交互是通过在组件上定义的 bindtap 事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的 wx.switchTab 。事件以及传参可以通过 triggerEvent ；
文件目录
引用组件
组件的data
组件的路由跳转
源码GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；
END
往期文章
个人主页
以上就是微信小程序自定义tabbar的全部内容，首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。然后新建个tabBar.wxml文件，这里就写下你的tabBar的结构。下面是tabBar所需要用到的样式。
