Vant 顶部导航栏【van-tabs】Bug

朱雀 2022-04-11 04:23 784阅读 0赞

*  Vant 顶部导航栏【van-tabs】Bug

如果在外面包裹div控制显示隐藏会出现导航条不准确的bug

代码

<div class="selWrap" v-show="showSelWrap" >
    
      <van-tabs v-model="active">
    
        <van-tab title="过关">
    
          111
    
        </van-tab>
    
        <van-tab title="单关">
    
          内容 6
    
        </van-tab>
    
      </van-tabs>
    
      
    
    </div>

效果

![20190127145302809.png][]

问题：因为要多次隐藏显示所以用v-show来控制，就会出现这样问题。

解决：用v-if代替就行，希望官方能解决这个问题

![20181204195151813.png][]

2019/11/19日更新：

鉴于评论区有人问吸顶怎么处理，其实文档是有属性的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70][]

[https://youzan.github.io/vant/\#/zh-CN/tab][https_youzan.github.io_vant_zh-CN_tab]

[20190127145302809.png]: /images/20220411/4bc41b84555c43ab889820175c6b7993.png
[20181204195151813.png]: /images/20220411/b366af6cfeca4848bc1dc7315ad8ef64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMDAxMDYx_size_16_color_FFFFFF_t_70]: /images/20220411/80eca3015c3740e3a9e3bb4c039963f0.png
[https_youzan.github.io_vant_zh-CN_tab]: https://youzan.github.io/vant/#/zh-CN/tab

发表评论取消回复

表情：

评论列表（有 0 条评论，784人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 顶部标题导航栏

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210119101820292.png\pic\_center][https_im

本是古典何须时尚/ 2023年01月08日 05:22/ 0 赞/ 281 阅读

相关 android 顶部导航栏自定义,Android自定义顶部导航栏控件

class HeaderBar @JvmOverloads constructor( context: Context, attrs: AttributeSet? = nul

朱雀/ 2022年10月16日 00:58/ 0 赞/ 395 阅读

相关利用JQuery实现顶部导航栏功能

今天给大家介绍一下，如何利用JQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。下面举个例子具体介绍一下如何这些功能，案例如下：

落日映苍穹つ/ 2022年07月16日 11:40/ 0 赞/ 415 阅读

相关自定义顶部导航栏

创建自定义属性在res/values中创建名为attrs的文件。定义2个属性，分别是左边按钮和右边按钮，值是drawable，所以格式应该为refrence。

淩亂°似流年/ 2022年07月13日 23:42/ 0 赞/ 391 阅读

相关 Vant 顶部导航栏【van-tabs】Bug

Vant 顶部导航栏【van-tabs】Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap"

朱雀/ 2022年04月11日 04:23/ 0 赞/ 785 阅读

相关功能1 -- 顶部导航栏和返回顶部效果

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] <!DOCTYPE html> <html><hea

秒速五厘米/ 2021年12月14日 12:35/ 0 赞/ 458 阅读

相关 uniapp 任务栏顶部导航适配

uniapp 任务栏顶部导航适配一、问题说明： 1、问题：手机型号不一样头部导航显示样式和高度都不一样，例如：刘海屏、挖孔屏 2、解决思路：

ゝ一世哀愁。/ 2021年09月18日 06:12/ 0 赞/ 633 阅读

相关 CSS+HTML 顶部导航栏实现

导航栏的实现、固定顶部导航栏、二级菜单实现效果图： ![在这里插入图片描述][70] -------------------- 2018/11/16更新：最

川长思鸟来/ 2021年09月16日 10:08/ 0 赞/ 575 阅读

相关 rn 通过导航组件修改顶部导航栏信息

方式一:将选项配置变成函数,根据传递的参数动态改变标题 <Stack.Screen name="xx"

柔情只为你懂/ 2021年07月24日 20:23/ 0 赞/ 922 阅读

相关 rn 顶部导航栏

(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-hand

逃离我推掉我的手/ 2021年07月24日 12:45/ 0 赞/ 809 阅读