subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件,就是一个原生子窗体。
首页
{
"path": "pages/houseDetails/index",
"style": {
"navigationBarTitleText": "详情",
"navigationStyle": "custom",
"app-plus": {
"subNVues":[{
"id": "concat", // 唯一标识
"path": "pages/houseDetails/tabbar", // 页面路径
"style": {
"position": "dock",
"dock": "bottom",
"width": "100%",
"height": "120rpx",
"background": "transparent"
}
}]
}
}
},
position
原生子窗体的排版位置,排版位置决定原生子窗体在父窗口中的定位方式。 可取值:"static",原生子窗体在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;"absolute",原生子窗体在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;"dock",原生子窗体在页面中停靠,停靠的位置由dock属性值决定。 默认值为"absolute"。
dock
原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效,可取值:"top",原生子窗体停靠则页面顶部;"bottom",原生子窗体停靠在页面底部;"right",原生子窗体停靠在页面右侧;"left",原生子窗体停靠在页面左侧。 默认值为"bottom"。
"path": "pages/houseDetails/tabbar", // 页面路径 自定义你的内容
onReady() {
// 通过 id 获取 nvue 子窗体
// #ifdef APP-PLUS
const subNVue = uni.getSubNVueById('concat')
console.log(subNVue)
// 打开 nvue 子窗体
subNVue.show('slide-in-bottom', 300, (res)=>{
console.log('oooooooooooooo')
console.log(res)
});
// #endif
}
在你的页面打开子窗体
最后效果