【tabbar导航条】关于tabbar设置的多种解决办法 及 总结

提供三中方法

1.在app.json中custom选择false 使用微信小程序原生tabbar
优点：
操作简单
缺点：
在不同机型上 tabbar所占高度不同
不能设置tabbar中各元素样式 如字体 高度 icon大小等
各选项显示效果相同 不能差异化设置

2.在app.json中选择custom为true 根目录下建立custom-tab-bar目录 设置特殊的组件
通过app中或外部module的全局属性来控制状态 实际效果不理想
优点：
可以自定义样式
缺点:
该组件不属于任何页面 不能获取该组件 不能设置初始状态
利用组件的ready周期函数可以简介设置初始状态 这是个异步周期函数 什么时候加载组件成功 什么时间执行
custom-tab-bar组件不属于整个app下 每次switch打开新的tab页面 又会重新再次初始化一个新的custom-tab-bar组件 导出生成多个custom-tab-bar组件 各自展示各自的状态和样式 且无法获取该组件或多个该组件实例 因为不是在页面初始化导致 这就无法控制tabbar的实际显示状态

分析原因：在小程序发布的时候 没有粪叉或其他全面平手机 原生tabbar在适应全面平手机时 功能不能满足原来的需求 故在tabbar属性下增加custom自定义组件 但是这个天杀的自定义组件和component里的组件又不一样 他没有在页面中初始化 而是在app.json中定义 系统自动加载组件 也就是说是一个阉割版的组件

3.自定义component组件
自定义component组件 可以在多个页面分别调用 或 将页面做成组件直接使用
前者会产生tabbar组件跟随页面一起滑动 （打开/关闭） 效果差强人意
后者会满足上述所有优点 但页面上组件较多 可能在旧的机型上 产生卡顿的情况 这个方法由于进度 暂时不实验了

最后 我无奈且屈辱地使用了原生tabbar组件 不同机型分辨率下 tabbar的大小是不同的 尤其在粪叉场景下 tabbar中的图标和文字较小 老年人很可能看不清 不过考虑项目进度 只能选择该方法

对官方的展望：

使用如下方法 可以解决上述问题

@官方能提供一个获取自定义custom-tab-bar组件的方法用来控制组件状态

@在app顶层打开唯一的custom-tab-bar组件 而不是每次switch打开新tab页时 重新初始化 多个custom-tab-bar组件