vant tabbar遮挡内容的解决方式

前面我们提到，使用vant-tabbar 来替换原生的tabbar，但是实际使用中发现，当tab页内容过多之后，tabbar会遮挡页面最下方的内容

直接上图：

我们会发现，两个按钮消失了，从 2 处可以看到，屏幕右侧的 scroll 越过了 tabbar 一栏，说明内容是被遮挡住了，确实滑到了底部但是看不到按钮。

为什么会这样呢？小程序的自定义组件，是通过 slot 的方式将内容注入进去再渲染出来的，而 vant-tabbar 组件是 通过 cover-view 的形式 覆盖在原生组件之上的视图 ，它并不是通常意义上的引用组件，所以和内容元素并不是同级关系。

开始我想既然被 tabbar cover 住了一块区域，那我找到 tabbar 组件的高度，然后把底部元素顶上去不就好了吗？

如上图，确实找到了，vant默认是50px，不过固定效果堪忧，大家感兴趣的可以试一下。我猜测是由于组件底部还有一段安全距离，所以这个 height 并不完全等于 tabbar 的占用高度，其次也会受机型影响。

期间也试了另一种方式，用 scroll-view 标签包裹住内容，然后设定一个固定高度