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

Posted 2021-03-17 狂奔的豆芽

       最近在做微信小程序 用到了 vant weapp 框架，在使用tab切换的时候，发现如果html结构在 display:none 的情况下，tab下方高亮线消失了，查了好几天方案，发现高亮线宽度渲染出来了，但是宽度为0，后边又发现，只要是结构隐藏，可能很多样式渲染都会出现一些问题，大家做的时候小心一点哦，小心被 ui 喷，开个玩笑，言归正传，上解决方案。

       我这边是这样的，默认进入小程序，底部3个 tabbar 切换，由于自带 tabbar 太卡了，把每一个都封装成了组件，在组件的外层多嵌套一层 view 标签用来判断 class 控制显示隐藏，class 的书写也不能用 display:none 换成了控制透明度和高度来达成显示隐藏的目的。代码如下图：

 

.show {
  opacity:1;
}

.hidden {
  opacity:0;
  height:0;
}

刚开始卡住了，没管，继续做工作，后边一边工作一边在想如何解决这个莫名其妙的问题，最终想到了这个“土”办法，大家做东西的时候可千万不能慌，休息一下脑袋，换换思路，就能解决啦！

大家共勉...