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

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

作者: SleepWalkerLj | 来源:发表于2023-04-19 10:11 被阅读0次

问题

开发一个带有固定标题的页面时,使用到了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,就行了
这个是评论区的大哥给的方法,尝试之后确实可行,感谢

相关文章

  • 一行CSS代码,实现吸顶布局!

    使用定位属性sticky完成吸顶布局。

  • vant 组件 tab标签 去掉省略号

    在.van-tab属性里加flex:none;

  • H5在移动端的适配

    使用H5写移动端代码时,经常会遇到在PC端显示正常,但到移动端,会出现很多问题。常见问题如下: 移动端的双击或者双...

  • position:fixed失效问题

    问题出现:vant 的tab标签页设置吸顶失效. 原因: 上级盒子设置了transform属性,transform...

  • Chrome中sticky定位的导航栏产生1px缝隙

    起 其实这个问题来源于吸顶的实现。CSS中定位使用sticky属性,可以直接实现吸顶效果。参考sticky hea...

  • 移动端position:fixed移动

    当开发过程发现在移动端使用固定定位会出现移动的问题(ps:ios系统经常出现,当出现滚动事件); 移动端应避免少使...

  • 嵌套tableview滑到底部无法滑动

    嵌套tableview时,子tableview吸顶后滑到底部后出现无法再次上拉加载的问题,出现这个问题是到底后需要...

  • position: sticky

    sticky 的本意是粘糊糊的,但在 css 中的表现更像是吸附。常见的吸顶、吸底(移动端网站的头部返回栏,底部切...

  • Bootstrap框架

    *移动端设备优先 *使用前需在head标签中添加viewport元数据标签和通过meta属性禁用移动端界面缩放功能...

  • 网页真机调试

    移动端调试困难很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/kmzkjdtx.html