小程序cover-view踩坑

Posted 2023-05-17

参考技术A 可以使用的有： cover-view 、 cover-image ， button ， <ad> ， <navigator> ，其他的一律不显示

意思就是要么设置四周的边框，要么就不显示，单独使用 border-left ， border-right ， border-top ， border-bottom 都不会显示，那么问题来了，如果要绘制类似于表格的东西，单元格之间边框肯定会很粗，这就需要单独设置某一条边的边框，这恰恰是 cover-view 不支持的，例如：

微信开发者工具上看好的很：

然而我们再来看看真机上：

Android上同样不显示

有问题就要解决啊，于是又弄了这么个解决办法：所谓边框就是4条线吧，那我们手动创建这四条线：

开发工具上完全符合我的需求啊，当时就乐的不行，感觉自己是个天才，而且ios上也好的很，可是，偏偏Android让人头疼：

cover-view 的定位还是有点问题，遇到这样子的也真是无解了

正常应该是这样的：

但就是因为用了 cover-view ，才出现这个样子：

在子节点溢出父节点后，溢出部分就被吃掉了，这种情况只在 cover-view/cover-image 出现，只能把超出的那个 cover-view 提到上一层去了，但是这又会掉到新的坑里去了，这里很明显有个层级问题😭，非常难调试，这里我的解决方式是创建两个一样的 cover-image ，一个放在外面，一个放在里面，因为互相有一部分不显示，正好凑成一张完整的图，当然最外层的父容器要先加个 padding 。

解决小程序中 cover-view无法盖住canvas的问题，仅安卓出现这个问题

原因在于系统页面渲染的差异，在安卓中页面dom的渲染并不是完成按照上下顺序来的，

有可能出现写在后面的dom被先渲染出来，因此会随机出现能盖住、不能盖住的情况，很诡异是不是？

开发者工具中并非真机，只是模拟显示，调整时显示正常不代表真机中正常

 

解决方式很简单：

将cover-view的渲染延迟一些，例如设定500ms后显示

 

此问题在页面调用echarts时出现，而echarts用的是canvas实现，希望对你有帮助！