zoukankan      html  css  js  c++  java
  • 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;
    }

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

    大家共勉...

  • 相关阅读:
    LeetCode题解No11——“盛水最多的容器”
    第二次作业
    第一章 模式识别基本概念
    第一次个人作业
    第02组 Beta版本演示
    第02组 Beta冲刺(4/4)
    第02组 Beta冲刺(3/4)
    第02组 Beta冲刺(2/4)
    第02组 Beta冲刺(1/4)
    第02组 Alpha事后诸葛亮
  • 原文地址:https://www.cnblogs.com/douyage/p/12162662.html
Copyright © 2011-2022 走看看