前段时间做项目遇到这样一个情景,用户点击生成海报,海报弹出来覆盖了下方固定定位的按钮,因为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名必须一致。
以上就是本次分享内容,感谢观看,最后放一下效果。
子窗体效果

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐