程序员的资源宝库

网站首页 > gitee 正文

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

sanyeah 2024-03-29 15:20:43 gitee 7 ℃ 0 评论

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

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

大家共勉...

 

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表