当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 小程序自定义底部导航栏

小程序自定义底部导航栏

2018年10月18日  | 移动技术网IT编程  | 我要评论

自定义底部导航栏组件

代码片段地址

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

效果预览图

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

起步

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

实现思路

首先我们先了解下微信的路由api和微信的路由机制,微信一共提供了5个路由api:wx.navigatetowx.redirecttowx.switchtabwx.navigatebackwx.relaunch,具体文档位于。

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

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

相关文章:

验证码:
移动技术网