我们的页面上有个echarts的图表,然后需要在页面底部放置一个底部导航,由于canvas原生组件层级最高且页面布局要求很高(详见微信小程序canvas元素悬浮,不随父组件滚动的问题),所以只能使用可自定义层级的cover-view组件来作为fixed在底部的元素组件。
但是后面发现cover-view虽然设置了bottom:0,但是在ios上偶现的会浮在页面上的其他位置,而不是在底部。后来经过多种方式的定位,发现是页面初始化时,在页面其他元素还没有加载完时,整个页面的容器高度还没有撑开。复现方式,去掉页面上的其他元素,只保留cover-view这个fixed元素,会发现这个元素没用办法正确定位到正确的位置了。这里应该属于微信开平的一个渲染bug,但是我们在业务侧需要解决,我们最终的解决方案是给page元素设置最小高度,min-height:100vh,以及包含cover-view的父元素也设置min-height:100vh。
当然,如果是自定义导航栏,100vh并不能解决这个问题,因为这个bug的存在,页面渲染时100vh并没有包含导航栏的高度,所以这个时候,你可以尽可能的设置大一点,以确保这个bug不会出现,比如设置min-height:150vh,确认确实是这个问题后,再调到合适的min-height高度。