vant weapp tab切換 結構隱藏 下方高亮線消失解決方案

       最近在做微信小程序 用到了 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;
}

剛開始卡住了，沒管，繼續做工作，后邊一邊工作一邊在想如何解決這個莫名其妙的問題，最終想到了這個“土”辦法，大家做東西的時候可千萬不能慌，休息一下腦袋，換換思路，就能解決啦！

大家共勉...