微信小程序动态获取tabbar高度问题

本人是一个萌新，接触编程不到一年，因为经历过电脑爆炸的原因，曾经的笔记丢失大半，决定在这里记录一些遇到的坑和解决的过程（csdn的数据库不会炸吧。。。）

回归正题

一些手机自定义的tabbar的高度是不一样的，这会影响你对手机页面可视区域的布局

因此，动态获取tabbar的真实高度就很重要了

1，createSelectorQuery()

最开始的思路，是在tabbar组件内去获取，也是这么做的，但是在调用获取上出了一点问题

梦想是美好的，现实是残酷的，很明显，函数并没有被调用，后来在百度与CSDN里边徘徊了许久，发现了一些曾经并没有注意到的东西

2，Page和Component

会不会是和tabbar的特殊性质有关呢？因为在查看Wxml结构时偶然发现，他不在Page里边

因此，我注意到了自定义组件Component

看了他的一些文档，发现它和Vue的相似度，比Page的结构更加相似，然后我尝试了自定义组件的结构，更改了js，终于，在attached和ready函数里调用成功了

（注意：在自定义组件中，自定义的函数要放在methods内）

但是，你以为这就结束了？

3，机型与wx.getSystemInfo

无论是在tabbar（custon-tab-bar）内获取，还是在其他page内通过获取tabbar实例调用定义好的方法也好

都能拿到确切的数据（50px，或许是vant-weapp tabbar的高度都是50px，因为我用的是这个），但是，却不是实际的tabbar高度

没错，折磨了我半天，我终于意识到是某些机型的问题

这让我更讨厌苹果了

通过wx.getSystemInfo，我获取到了机型的详细信息，用屏幕高度-安全区底部的坐标，就能得到多出来部分的高度，再让他加上千年不变的tabbar高度，就获得了不同机型下tabbar的高度

虽然折磨，但是没有折磨，就没有成长，自己解决难题的过程，能迫使你进步，过程中即使不能解决问题，也能学到很多。

再次强调！本人是个刚入门没多久的萌新，如有大佬发现问题，请及时指正，多谢！！！