uni app map 地图 漂浮问题及方案

文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生组件渲染后位置固定了,而当页面图片加载完成后,就会有地图漂浮的感觉,如下图:
在这里插入图片描述

解决方法:
(方法1)控制图片的宽高,让图片没加载完也占高度,这样就不会影响map加载和位置;
(方法2)加一个延时,等待图片加载完成后,再开始加载map,在map标签使用v-if控制;
(方法3)等待页面滚动到一定的距离,开始加载,如果地图在底部,就直接使用 onReachBottom 页面生命周期,然后可以在pages.json设置 onReachBottomDistance 距离底部分距离触发。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐