uniapp原生子窗体subNvue的使用

官网解释：

1.subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。

2.它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。

3.它也不是组件，就是一个原生子窗体。

使用场景：

• 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。
• 弹出层内部元素可滚动,
• 在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。

subNVue 子窗体引用的是 nvue 页面。所以 nvue 页面。nvue介绍

subNVue 子窗体的 pages.json 配置

在 pages.json 中，新增了 subNVues 节点, 与 titleNView 在同一级别。支持配置 subNVue 子窗体的相关属性。配置结构如下:

subNVues:

• id: [String], 全局唯一，不能重复。
• path: [String], subNVue 子窗体的路径。
• type: [String], 内置的特殊子窗体类型，弹出(popup)和导航(navigationBar)。一旦设置 type为navigationBar或 popup,position和dock 的值都会被忽略。
• style: [Object], 配置子窗体的位置，背景等样式属性。

// 首页
        {
            "path": "pages/home/index",
            "style": {
                "navigationStyle": "custom",
                "backgroundColor": "#fff",
                "app-plus": {
                  "titleNView": false,
                    "subNVues": [
                        {
                            "id": "release", // 唯一
                            "path": "pages/home/uploadWay", // 页面路径
                            "type": "popup",
                            "style": {
                                "position": "absolute",
                                "mask": "rgba(0,0,0,0.5)",
                                "width": "750rpx",
                                "height": "609rpx",
                                "bottom": "0",
                                "background": "transparent"
                            }
                        }
                    ]
                }
            }
        },

style参数设置：

position 原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。

"static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；

"absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；

"dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。 默认值为"absolute"。

dock 原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；"bottom"，原生子窗体停靠在页面底部；"right"，原生子窗体停靠在页面右侧；"left"，原生子窗体停靠在页面左侧。 默认值为"bottom"。

mask 原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；

width 原生子窗体的宽度,支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。

height 原生子窗体的高度,支持百分比、像素值，默认为100%。 当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。

top 原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。 未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。

bottom 原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。 当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。

left 原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。 未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。

right 原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。 当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。

margin 原生子窗体的边距，用于定位原生子窗体的位置，支持auto，auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。

在页面中打开和关闭 subNVue 子窗体

// 通过 id 获取 nvue 子窗体  
_this.subNVue = uni.getSubNVueById('release')
// 打开 nvue 子窗体  
_this.subNVue.show('slide-in-bottom', 300);

// 关闭 nvue 子窗体  
_this.subNVue.hide('slide-out-bottom', 300)

// 动态修改 subNVue 子窗体位置，大小
subNVue.setStyle({  
    top: '100px',  
    left: '20px',  
    width: '100px',  
    height: '50px',  
})

subNVue 子窗体与 vue/nvue 页面通信

nvue 子窗体与使用子窗体的 vue/nvue 页面之间，可以互相发送和传递消息

// 监听消息
uni.$on('closepop-page', (data) => {
        formData.value = data
        if(this.subNVue) this.subNVue.hide('slide-out-bottom', 300)
})
// 发送消息
uni.$emit('closepop-page',formData);

示例： 选择上传方式的弹窗使用了subNVue子窗体.

 

 

注意事项：

1.一个vue页面不要加载太多 subNVue 子窗体，建议控制在三个以内,减少内存的消耗；

3.每个subNVue 页面都要在 pages.json 中注册；

2.当然如果一些简单的需求，如果 cover-view 已经能搞定，毕竟能跨端，内存占用也更低，cover-view不支持嵌套、只能在video、map上使用、样式和控件少；

4.plus.nativeObj.view也可以实现悬浮，更灵活，但易用性比较差、没有动画、不支持内部内容滚动。