vant weapp tab切换结构隐藏下方高亮线消失解决方案

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述vant weapp tab切换结构隐藏下方高亮线消失解决方案相关的知识，希望能为你提供帮助。
【vant weapp tab切换结构隐藏下方高亮线消失解决方案】 最近在做微信小程序用到了 vant weapp 框架，在使用tab切换的时候，发现如果html结构在 display:none 的情况下，tab下方高亮线消失了，查了好几天方案，发现高亮线宽度渲染出来了，但是宽度为0，后边又发现，只要是结构隐藏，可能很多样式渲染都会出现一些问题，大家做的时候小心一点哦，小心被 ui 喷，开个玩笑，言归正传，上解决方案。
我这边是这样的，默认进入小程序，底部3个 tabbar 切换，由于自带 tabbar 太卡了，把每一个都封装成了组件，在组件的外层多嵌套一层 view 标签用来判断 class 控制显示隐藏，class 的书写也不能用 display:none 换成了控制透明度和高度来达成显示隐藏的目的。代码如下图：