小程序自定义底部导航栏

自定义底部导航栏组件

代码片段地址

可直接点击链接在微信开发者工具上查看 wechatide://minicode/4c6glemy7j31
github:

效果预览图

此预览图是作者通过底部导航栏实现的效果并不是本代码的效果

起步

目前大部分小程序是有底部导航栏的，用户可以通过底部导航栏进入不同业务的页面，小程序实际上是可以通过简单的配置实现一个这样的东西(app.json)，简单使用的够用的，不过如果想进行更多的骚操作(比如通过判断用户身份，展示不同的导航，突出中间的导航栏引导用户点击...)，就需要自己自定义了。

实现思路

首先我们先了解下微信的路由api和微信的路由机制，微信一共提供了5个路由api：wx.navigateto、wx.redirectto、wx.switchtab、wx.navigateback、wx.relaunch，具体文档位于。

其中我们用哪个呢？很显然wx.switchtab很合我们的口味，因为他的切换效果是没有推入推出动画的，更符合我们的习惯，那使用他的前提是我们需要在app.json文件中配置tabbar属性，而只要一配置了tabbar属性，系统原生的导航栏就出现了，幸好微信有一个隐藏原生导航栏的api：wx.hidetabbar。看到这里相信聪明的你已经知道了实现思路，就是隐藏掉原生的然后自己去实现一个导航栏贴在最下面。

分享一些我觉得需要注意的点

• 首先，微信的tab配置，支持2-5项，同时只有配置了tab的才能通过wx.switchtab方法跳转过去，因此我们自定义的导航栏数量也被限制在了2-5项，正常使用没什么，但是如果大家要基于权限判断做动态路由，就要慎重了；举个例子，有a,b两种身份，a可以看到的页面是a、b、c，b可以看到的页面是d、e、f，这种情况就不能通过本项目的代码实现了，好在通过观察发现，并不是不同身份的人看到的页面完全不一样(如果完全不一样可以做两个小程序啊)，比如 a : a、b、c，b: a、b、d，这就完全没问题了