uniapp中解决map、video、canvas层级过高问题
前段时间做项目遇到这样一个情景,用户点击生成海报,海报弹出来覆盖了下方固定定位的按钮,因为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名必须一致。
以上就是本次分享内容,感谢观看,最后放一下效果。
更多推荐
已为社区贡献7条内容
所有评论(0)