解决cover-view在安卓机上盖不住原生组件的问题

本文介绍了在微信小程序开发中遇到的cover-view无法覆盖原生canvas组件的问题,详细分析了原因在于安卓机页面渲染的差异,并提出两种解决方案:使用定时器和利用组件生命周期方法mounted。添加定时器虽能解决问题,但会导致短暂空白,而利用mounted生命周期则在性能上有提升。
摘要由CSDN通过智能技术生成

起因是公司需要做的小程序,需要一个自定义的导航栏,类似于这样:在这里插入图片描述

在这里插入图片描述由于使用的原生的组件canvas,在真机测试的时候,出现了菜单无法遮盖canvas的情况。如下图:
在这里插入图片描述查询资料了解到 ,是因为原生组件层级的原因。
通过使用cover-view解决了以上问题。
但是安卓机真机测试时发现,即使使用了cover-view依然无法覆盖。
查阅资料发现,原因在于系统页面渲染的差异,在安卓中页面dom的渲染并不是完成按照上下顺序来的,
有可能出现写在后面的dom被先渲染出来,因此会随机出现能盖住、不能盖住的情况。
解决方案:添加定时器,确保cover-view是后被渲染出来的。
在这里插入图片描述
在这里插入图片描述这种方案确实可以解决问题,但是添加了定时器之后,菜

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值