Vant2的van-tab使用吸顶属性后在移动端出现抖动的问题

问题

开发一个带有固定标题的页面时,使用到了van-tab组件,标题用了vant的导航栏,是固定在头部的

原型页.png

因为需求中要求van-tab有吸顶功能,所以使用了van-tab的stickyoffset-top属性,并将offset-top的值写了和导航栏一样的高度46px,然后我在电脑浏览器的h5模式下测试是正常的,但到手机上(ReactNative的webview里),就发现往上滑动时,tab出现抖动的情况,在一番百度之后也没有找到有效的答案,就写了一个临时方案来处理。

分析

在观察问题之后,我发现是offset-top的值和导航栏的高度是一样的,按理来说向上滑动时,tab应该是固定的(在电脑浏览器上确实是这样),但在手机上tab却轻微向上移动了大概1px(此时tab的顶部大概在40px高度的地方),然后才吸顶去到高度41px的地方,正是因为这个原因所以导致滑动时出现抖动的情况

方案

于是我尝试把offset-top的值设置的比导航栏高度大1px,这样应该就不会出现向上移动的情况,测试之后确实不会出现抖动的情况,不过由于tab比导航栏高了1px,出现了间隙

效果图.png

于是找到van-tab的.van-tabs__wrap,给他写了个伪元素来盖住这个缝隙

.van-tabs__wrap::before {
      position: fixed;
      top: 46px; // 设置成和导航栏一样的高度
      z-index: 100;
      content: '';
      height: 2px;
      width: 100%;
      background-color: #fff;
    }

最后在ios和几个安卓手机上测试都没有问题,不过这也只是一个临时方案,如果有大佬了解具体原因,烦请评论区留个言告知一下,感激不尽


感谢.jpg

补充

.van-sticky 是动态添加 position: fixed, 给他写个死的position: fixed,就行了
这个是评论区的大哥给的方法,尝试之后确实可行,感谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,085评论 2 59
  • 在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配。 由于Android系统的开...
    知青的叶阅读 1,557评论 0 2
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,365评论 2 237
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    安石0阅读 1,931评论 0 5
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 6,578评论 0 12