前言:以下分享的是子窗体显示/隐藏和父窗体与子窗体之间的通信(传值);为什么使用子窗体?比如项目中有类似地图这样的功能,如果页面有弹窗的话会被地图所遮挡,或者有弹窗的层不高无法遮挡原生顶部这时就需要子窗体来实现该弹窗了,例如:页面中的弹出分享、客服、通知之类的弹窗都可以使用子窗体实现…
PS:表达不详细的地方可以评论补充,谢谢~
实现效果:
(子窗体显示前)
(子窗体显示后)
现在来看看demo结构~
PS:子窗体不适合复用;也就是说图中的upup.nvue这个子窗体只能给index.vue的页面用,pages.json的命名的子窗体ID也只能是唯一的。不按照以上规则的话记得是子窗体可以被复用但是有问题(可以以去测试,这个是我目前遇到的问题,也是坑~)
demo结构介绍过了
现在讲一下upup.nvue这个文件;也就是子窗体。
在新建子窗体他默认的是DIV标签,我就这里就不使用VIEW标签了。
注意的地方:CSS语法问题;比如在普通的HTML或者vue文件,css的border你可以这样写“border:1px solid red”在子窗体就不一样了,他必须要写成“border-color: red;border-style: solid;border-width: 1px;”,还有背景颜色这块在子窗体写成“background”是不行的,需要写成“background-color”才可以
PS:具体语法可以看看weex地址的语法
下面说说子窗体是如何引用到当前页面去的,以及显示的动画
在pages.json文件引用子窗体
PS:宽高不设置的话默认100%的;这里就相当于定义的函数但是还没有被调用的状态,配置很简单,具体的参数可以去官网看看就可以了~
地址:https://uniapp.dcloud.io/api/window/subNVues?id=api
下一步是调用子窗体
PS:点击触发显示子窗体;可以显示和隐藏掉子窗体
窗口显示的动画
窗口关闭的动画
关闭子窗体