今天朋友问我这个微信小程序的自定义 tabBar,有个问题,那么作为一个程序员的我 那当然是…没有啦,自定义 tabBar刚出来不久,最近的小程序设计图也未涉及需要自定义的 , 不过作为一名程序员,对代码的事情都是尽量不能说No的 那么肯定给写个案例耍耍

首先介绍一下微信小程序的自定义 tabBar 有些看官嫌我话多(滑稽.jpg)的话就直接拉下去看案例源码吧

看上去是不是特别简单,其实也确实简单,不难的
首先做个常见的 就是一些Tabber_item会凸起那个 如图

这个写完发现太简单也太…low了 拿了同事要他要的做的设计图 做这个

会动一下 就没找问题改了 写的简化版 具体要怎么的再加就是了 我主要是给你们展示一下自定义tabbar的 有需要的自己拿源码改了 如果不懂的小伙伴有需要可以留言讨论一下 创建了代码片段 需要的朋友直接点击就好了

分享链接https://developers.weixin.qq.com/s/9uiHWwmH7c7y

打开链接会自启动项目命令 如果打开没有反应的 需要把微信开发者工具的服务端口打开 设置>安全>安全端口>开启

如果朋友实在不会搞 那我这里也上传了代码

https://download.csdn.net/download/battercake/11102695

需要的去下载 需要积分(怎么改成0积分我是真不知道怎么搞==!!没看到 有朋友知道的说一下 ) .

这里说一下 把代码片段或者官方案例迁入无效解决方法 同事拿我的代码复制过去后 无报错无显示 这是为什么呢 其实很简单 因为这个自定义tabBar需要基础库2.5.0以上 需要用自定义tabBar 那就去项目根目录project.config.json文件 改"libVersion": "2.5.2"或者以上 现在最近创建默认是2.6.2的 以前旧的项目才需要改 为什么不是2.5.0呢 因为有一个bug 非 tab 页显示 tabBar 问题在2.5.2 起已修复 所以需要这个以上

自定义tabBar与原生tabBar以及自写伪tabbar的区别

1. 在以往官方自定义Tabber没出来的时候碰到设计图是比较"特色"的话 往往是不设置原生Tabber然后使用template模板在对应页面塞写好的自定义Tabber做成伪Tabber效果 理论上是做出来了 大部分也是这么做的 但就是有个弊端 加载没有原生Tabber加载快 而且切换闪烁以及那个切换动画明显

2. 原生Tabber的好处就不用说了 与上相反再加个稳定 缺点就是无法自定义 位置固定

3. 到现在出了这个官方自定义Tabber 优点明显 就自定义 缺点目前所发现 点击会闪烁 抖动 也就是动图所展示的 一开始我以为是我写的样式问题 后面发现不是 还有一个bug 非 tab 页显示 tabBar ，问题在2.5.2 起已修复 基础库写个2.6就差不多了 这样还需要写个版本判断 毕竟有些人是n年不更新软件的 到时无法使用就难搞了 坑还是有的 慢慢改进中

最后我想说的是 能用原生就先用原生先 用户体验才是优先的 跟设计师沟通
see you