自制<!--18199387-->微信小程序tabBar的三种方法
在微信小程序时，有时候原生的tabBar无法满足需求，这时候我们就需要自己动手实现一个功能相似的自定义组件。通过查阅大量资料和亲自实践，我总结了三种不依赖原生tabBar的自制方法，下面就来详细说说它们的实现思路和各自的优缺点。
类跳转方式
这种方法的名字是我自己起的，因为它的核心思路就是通过页面跳转来实现tabBar的功能。最初参考了“微信小程序自定义tabBar组件”这篇博客的思路，进行了尝试，并为后续的解决方案提供了灵感。
在实践过程中，我使用了和博客中类似的目录结构，文件主要包含了tabBar的内容、逻辑、模板和样式。全局引入样式后，在每个页面的子文件（wxml、JS）中引入相应的内容，并在对应的onLoad生命周期中注明它是哪一个tabBar。
虽然最终实现了效果，但这种方法有一个明显的缺点：页面切换时会出现抖动和闪烁。这是因为它的本质是通过事件触发实现页面跳转，导致体验不够流畅。后来我发现，博客的作者也提到了这种方式的不足，并建议将页面都写成组件来实现更好的效果。
组件化方式
为了解决跳转闪烁的问题，我继续查阅了相关资料，找到了“微信小程序 - 自定义tabBar”这篇博客。按照博客描述的结构，我也进行了尝试，发现这种方式不会出现之前的闪烁现象。
这种方法的核心思想是将tabBar写成一个页面，其他tab按钮对应的页面写成组件。这种方式类似于Vue中的组件化，可以把单个组件文件夹当作Vue中的一个.vue文件。虽然与普通页面类似，但JS文件和JSON文件与页面不同。
在实现过程中，首先需要在JSON文件中引入组件，然后在JS文件中控制tabBar的选择，并传递一个参数告诉页面该隐藏或显示哪一个组件。WXML文件中直接使用之前JSON中引用过的标签名，类似于Vue中使用模板标签。由于组件模板标签不支持直接使用某些属性，所以需要在外层包裹一个标签来添加属性。
最终，通过这种方式成功实现了一个非原生小程序tabBar的自定义组件，效果流畅，用户体验也更好。
模板与组件的选择
在查阅“微信小程序 template 模板与 component 组件的区别和使用”这篇博客时，我了解到，如果主要是为了展示页面，可以使用template方式；如果涉及到各个页面的业务逻辑交互比较多，那就最好使用component组件。
在我的项目中，由于三个页面涉及到了很多的交互，所以我决定使用component组件的形式。将自定义的tabBar写成一个页面，其他三个tab按钮对应的页面写成三个组件。这种方法不仅结构清晰，而且逻辑处理也更加方便。
总结
通过以上三种方法的实践，我发现组件化方式是最适合复杂交互场景的解决方案。它不仅避免了页面跳转时的闪烁问题，还能更好地管理业务逻辑。当然，具体选择哪种方法，还是要根据项目需求和习惯来决定。希望这篇文章能为大家在微信小程序时提供一些有用的参考！
