[youzan/vant][Bug Report] Tab 使用 animated 属性导致标签页高度错误的问题

2024-05-22 318 views
5

测试机型: 小米Note 问题1: 粘性布局下,当Tab自动吸顶时标题文字所在区域出现小幅度抖动. 问题2: Tab2的高度大于Tab1的高度时,Tab1下滑时出现空白.

回答

0

问题3: swipeable滑动切换标签页时,在所有标签页中最大高度区域之外无效.

补充: 桌面端Chrome模拟和vivo xplay没有出现问题2中的情况.

8

uc 20181227030909

3

补充: 问题2是由于animated转场动画导致的.

5

33

1

我也出现这个animated开启后,tab页面的高度由最高的那一个决定的问题,1.5.0的版本

5

是的 问题如上所述 是否有方法切换后重新计算高度呢?

1

同样遇到了tab切换了,tab内容高度没有重新计算的问题,我是把animated关闭后才重新计划的

0

+1 animated 打开后 tab 会被撑开 vant version: 1.5.1 cc @chenjiahan

5

目前开启 animated 属性后,各个标签页会共用最大高度(最长的那个标签页把整个容器撑开了),建议先关闭 animated,或者使用局部滚动,后续我们看下怎么优化这个问题

0

1.6.9,遇到同样问题,开启animated后,tab1的高度会被tab2撑开

5

请使用v-if 与 tab 的索引值 index 做判断比较 这样就不会出现这样的问题了

9

看来很多人都遇到这个问题了,tab里面使用上拉加载的场景还是非常多的,当开启animated后,切换tab时,内容很少的tab页高度也会被其他tab页撑开,导致内容很少也可以上下滚动,如果关掉animated确实不太好看,要么只能换第三方的上拉加载组件了,希望官方早点解决吧。

6

请使用v-if 与 tab 的索引值 index 做判断比较 这样就不会出现这样的问题了

能具体说下解决方案吗?感谢

7

这个问题会在 2.0 版本修复,由于对 TabPane 的样式有一定调整,所以放到大版本里更新

2

`

`
6

<van-tabs v-model="tabIndex"> <van-tab v-for="(list,index) in tab"> <van-pull-refresh v-if='index == tabIndex'> </van-pull-refresh> </van-tab> </van-tabs>

请在列表下拉刷新或者在列表中嵌套一层div使用 v-if='index == tabIndex' 这样就可以了 大多数情况下我们需要对列表数组是否为空做出判断

9

已在 2.0.0-beta.0 版本修复