uniapp中解决map、video、canvas层级过高问题

前段时间做项目遇到这样一个情景，用户点击生成海报，海报弹出来覆盖了下方固定定位的按钮，因为canvas原生组件默认为层级最高。

这页面是合理的，假定我们需要我要关注和我要报名按钮覆盖生成图片按钮，那该怎么做呢

看了uniapp官方文档和查找了一些资料，主要有两个解决方案。

一、uniapp自带的cover-view组件

代码如下：
cover-view class=“match-row bottom-btn-list” aria-role=“button”
button class=“left-btn” >
我要关注
<btton
<button class=“right-btn”
我要报名
<btton

需要注意的是App端vue页面 cover-view、cover-image 中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。

二、App端提供了更灵活和强大的subNvue，参考的原生子窗体subNvue

废话不多说，直接上干货，步骤：
1、在page. json中配置唯一标识和子窗体页面路径

二、在页面中配置打开子窗体效果和样式及传参给子窗体

三、子窗体中代码编写和接受父级传过来的参数

注意：子窗体内嵌文件名必须是nvue结尾，在其中编写css时注意设置背景色不能省略color；文字必须用text标签包裹，不然样式不会生效；更多注意请去uniapp官网查看nvue书写规范

整个子窗体使用中需要注意的是page. json中的唯一标识名和页面中获取id名必须一致。
以上就是本次分享内容，感谢观看，最后放一下效果。