当前位置:   article > 正文

【uniapp】解决h5在ios safari浏览器tabBar抖动问题

【uniapp】解决h5在ios safari浏览器tabBar抖动问题

使用uniapp开发h5时,遇到页面滑动时,底部tabbar会卡顿和抖动的问题。并且这个问题只在ios的safari浏览器会出现,微信的h5浏览器没有这个问题。

解决方案是禁止页面在默认的body滚动,而是让它在内部容器里滚动。

  1. <view class="noscroll">
  2. <div class="home-page">
  3. </div>
  4. </view>
  5. .noscroll {
  6. height: calc(100vh - var(--tab-bar-height) - env(safe-area-inset-bottom));
  7. overflow: hidden;
  8. }
  9. .home-page {
  10. height: 100%;
  11. overflow-y: auto;
  12. -webkit-overflow-scrolling: touch;
  13. }

比较奇怪的是,查到的资料都是关于ios上fixed效果不好,然而除了tabbar以外的元素用了fixed并没有出现类似情况,因此,可能是tabbar本身存在其他问题。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/555808
推荐阅读