官方在19年就发布支持原生组件的同层渲染，但众所周知在这之后官方一直无法确保此功能在所有机型有效，我也理解官方的难处，毕竟同层渲染的<a href="https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813" rel="noopener noreferrer" target="_blank">实现原理</a>确实有点取巧，同层渲染让我们可以将web组件渲染在原生组件之上，支持完整的样式、动画，这是令人心动的。

但是。同层渲染存在失败几率，需要通过__bindrendererror__来进行效果降级，如果就此为止那也就没啥了，大不了渲染失败时我用cover系列组件顶上，丑就丑点。

问题是！同层渲染已完成后我们发现web组件偶发性被渲染到原生组件底下去了并且不会触发<strong style="font-size: 16px;">bindrendererror</strong>！特别是涉及滑动这类操作时更为明显。

因此，我在此先给出一个曲线救国的办法，我发现发生此类情况时，只需要切换页面并回来或者点击vConsole或者后台切回都会恢复正常，那就是意味着，只要原生组件上有其它组件需要渲染时会重新进行同层渲染！那么我只要确保有一个看不见的元素不断的显示和隐藏就可以一直触发同层渲染！只要速度够快用户就看不见bug！

以下是实现前（上拉并拉回时一个按钮和一条白边被渲染到原生组件底下去了）：

实现后（正常渲染）的效果：

以下是实现方法，虽然不太好，但我目前只能想到这个，后续看看有没有更好的优化方法：

方案一：

建议使用方案二，不会直接对DOM树进行增加和删除元素，对性能会友好一点，当然，如果方案二你们测试有问题可以使用方案一。

1.给原生组件上面放一个0宽高的元素，由一个变量控制显示或隐藏

2.写一个定时器控制该元素一直显示和隐藏，我这里只设100ms，低了怕影响性能，这个定时器只放在需要用同层渲染的时候，并且卸载页面时要记得停掉

3.然后由于这个元素一直被显示和隐藏，所以一直触发了同层渲染，就可以让错误渲染的web组件重新回到最前面

方案二：

1.给原生组件上面放一个0宽高的元素，由一个变量控制display样式来实现显示或隐藏

2.写一个定时器控制该元素一直显示和隐藏，我这里只设100ms，低了怕影响性能，这个定时器只放在需要用同层渲染的时候，并且卸载页面时要记得停掉

3.然后由于这个元素一直被显示和隐藏，所以一直触发了同层渲染，就可以让错误渲染的web组件重新回到最前面