问题描述:
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组件的问题。
最终实现图如下: