它的设计背景和用途详见:

通过 获取 subNVues 原生子窗体的实例。 subNVues 配置

代码示例

返回值

返回一个 对象

uni.getCurrentSubNVue()

在一个subnvue窗体的nvue页面代码中,获取当前 subNVues 原生子窗体的实例。

代码示例(注意执行在nvue页面中)

  1. const subNVue = uni.getCurrentSubNVue();

返回值

subNVue 对象的方法列表

方法说明
show显示原生子窗体
hide隐藏原生子窗体
setStyle设置原生子窗体的样式

显示原生子窗体

代码示例

subNVue.hide (aniShow,duration)

隐藏原生子窗体

参数类型默认值说明
aniShowStringauto隐藏原生子窗体的动画效果 ,如果没有指定窗口动画类型,则使用默认值“auto”,即自动选择上一次显示窗口的动画效果,如果之前没有显示过,则使用“none”动画效果。详见动画类型
durationNumber600隐藏原生子窗体的动画持续时间,单位为ms,如果没有设置则使用默认窗口动画时间 600ms。

代码示例

  1. subNVue.hide('slide-out-left',200);

设置原生子窗体的样式

原生子窗体的样式

属性类型默认值描述
positionStringabsolute原生子窗体的排版位置,排版位置决定原生子窗体在父窗口中的定位方式。 可取值:"static",原生子窗体在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;"absolute",原生子窗体在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;"dock",原生子窗体在页面中停靠,停靠的位置由dock属性值决定。 默认值为"absolute"。
dockStringbottom原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效,可取值:"top",原生子窗体停靠则页面顶部;"bottom",原生子窗体停靠在页面底部;"right",原生子窗体停靠在页面右侧;"left",原生子窗体停靠在页面左侧。 默认值为"bottom"。
maskHexColorrgba(0,0,0,0.5)原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效,可取值: rgba格式字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)",表示黑色半透明;
widthString100%原生子窗体的宽度,支持百分比、像素值,默认为100%。未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度。
heightString100%原生子窗体的高度,支持百分比、像素值,默认为100%。 当未设置height属性值时,优先通过top和bottom属性值来计算原生子窗体的高度。
topString0px原生子窗体垂直向下的偏移量,支持百分比、像素值,默认值为0px。 未设置top属性值时,优先通过bottom和height属性值来计算原生子窗体的top位置。
bottomString原生子窗体垂直向上偏移量,支持百分比、像素值,默认值无值(根据top和height属性值来自动计算)。 当同时设置了top和height值时,忽略此属性值; 当未设置height值时,可通过top和bottom属性值来确定原生子窗体的高度。
leftString0px原生子窗体水平向左的偏移量,支持百分比、像素值,默认值为0px。 未设置left属性值时,优先通过right和width属性值来计算原生子窗体的left位置。
rightString原生子窗体水平向右的偏移量,支持百分比、像素值,默认无值(根据left和width属性值来自动计算)。 当设置了left和width值时,忽略此属性值; 当未设置width值时,可通过left和bottom属性值来确定原生子窗体的宽度。
marginString原生子窗体的边距,用于定位原生子窗体的位置,支持auto,auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。
zindexNumber原生子窗体的窗口的堆叠顺序值,拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面,拥有相同堆叠顺序的窗口后调用show方法则在前面。

代码示例

subNVue.postMessage(OBJECT)

代码示例

  1. const subNVue = uni.getSubNVueById('subNvue');
  2. subNvue.postMessage({
  3. name:'subNvues'

监听消息

代码示例

动画类型

显示动画与关闭动画,会有默认的对应规则。但是如果通过 API 原生子窗体的关闭动画类型,则不会使用默认的类型。

详细的窗口动画说明,请参考:

  • 窗口显示的动画:
  • 窗口关闭的动画:AnimationTypeClose注意事项

  • 了解更多 subNVue 原生子窗体的用途,请详读

  • 在hello uni-app的接口-界面-原生子窗体中,有完整的subNVue示例,包括带渐变色的原生导航栏、可遮盖地图的侧滑菜单、可从顶部弹出的popup、可在视频上滚动的消息列表
  • 每个 subNVue 页面都要在 pages.json 中注册