小程序cover-view组件fixed时定位异常

       我们的页面上有个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高度。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值