在pages.json里面配置,使用subNVues
{
"path": "pages/appointmentRecovery/record/detail",
"style": {
"navigationBarTitleText": "预约详情",
"app-plus": {
"subNVues": [{
"id": "recordInfo", // 唯一标识
"path": "/pages/appointmentRecovery/record/info", // 页面路径
// "type": "popup", //原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏
"style": {
"position": "absolute",
"bottom": "100upx",
"width": "100%",
"height": "50%",
"mask": "rgba(0,0,0,0)",
"style": {
"popGesture": "none" // 组织侧滑返回, none,close
}
}
},{
"id": "recordMap", // 唯一标识
"path": "/pages/appointmentRecovery/record/map", // 页面路径
// "type": "popup", //原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏
"style": {
"position": "absolute",
"top": "0upx",
"left": 0,
"width": "100%",
"height": "50%",
"mask": "rgba(0,0,0,0)",
"style": {
"popGesture": "none" // 组织侧滑返回, none,close
}
}
}]
}
}
},
在父页面
// 根据id获取声明好的子页面
this.subNvueMap = uni.getSubNVueById('recordMap');
// 设置子页面的大小
this.subNvueMap.setStyle({ height: '50%' });
// 向子页面传参数
uni.$emit('to-modal1', JSON.stringify(obj));
// 通知子页面以什么形式显示
this.subNvueMap.show('slide-in-bottom', time, () => { console.log('显示subNvueMap'); });
子页面
// 子页面是以.nvue结尾的文件
// 在created声明周期中接收父页面的传参
uni.$on('to-modal1', data => { console.log('父组件传递给子组件的值', this.formData); });
// 子页面给父页面传参
uni.$emit('modal-change1', '我是传递给父组件的值');
// 在beforeDestroy生命周期销毁监听
uni.$off('to-modal1');