uniapp app端 | 关于map组件层级过高的解决办法

问题描述：

uniapp写app端，map、video等是原生控件，原生控件的等级要高于前端组件，所以直接覆盖了前端组件，z-index不起作用。
借用官方的话说是：

app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。

---

项目场景

`我在实际开发中需要用的map组件，接高德地图API，设计图需要做一个镂空的view组件，比如下面的样式，地图需要镂空在view组件上面，但是用上文的描述，在app端是不能用z-index的，那么问题就出来了，如何抉择？

原因分析：

因为z-index失效，那么就要找一个办法实现这种效果，或者说是找一个折中方案。

---

解决方案：

1、使用官方推荐的nvue文件模式，app-nvue所有组件均为原生渲染，不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容，nvue里也实现了cover-view，作用与普通view一样。
在App端，如果重度使用video和map，推荐使用nvue页面。[官方说的]
一个具有注脚的文本。

但是对于没有接触uniapp的人来说，又要多学一堆规范，不能够马上就用，需要学习时间

2、使用官方推荐的cover-view模式，cover-view 嵌套使用时，内部不可直接写文本节点，需要使用 cover-view 包裹，cover-view里面只能嵌套和写cover-image

我只能说CSS限制非常大，你只能拿这个写一些在地图上面的图标，就可以用这种方式

3、App端还提供了更灵活和强大的subNvue，参考原生子窗体subNvue，subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。

这种方式我没有尝试成功，但是看官方的介绍应该能用，需要在page.json需要的页面那个配置单里面配置 app-plus属性

4、我的方案是：他要覆盖，那我就不给他覆盖

将页面划分成两半，给一个按钮可以随时调节地图和view的高度，那么就折中实现这个地图组件的功能，这种方式最快，且报错难度低，因为把问题难度降低了，那么就能解决map组件的问题。

最终实现图如下：