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

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

<view class="noscroll">
    <div class="home-page">

    </div>
</view>

.noscroll {
	height: calc(100vh - var(--tab-bar-height) - env(safe-area-inset-bottom));
	overflow: hidden;
}

.home-page {
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

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

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐