let nvueStatus = $ref(true),
subNVue = uni.getSubNVueById('order'), //nvue子窗体-订单
subNVue2 = uni.getSubNVueById('circle');
onLoad(()=>{
subNVue.setStyle({
'position': 'absolute', //除 popup 外，其他值域参考 5+ webview position 文档
'width': '100%',
'height': 'auto',
'left': '0',
'top': '10%'
});
subNVue2.setStyle({
'position': 'absolute', //除 popup 外，其他值域参考 5+ webview position 文档
'width': '100%',
'height': 'auto',
'left': '0',
'top': '10%'
});
subNVue2.show('none', 0, (res) => {
console.log('subNVue2 原生子窗体map成功', res);
});
subNVue.show('slide-in-bottom', 200, (res) => {
console.log('subNVue 原生子窗体order成功', res);
});
})
function openOrClose(){ //开关subNvue的按钮
if(status == true){
subNVue2.hide('slide-in-bottom', 200);
subNVue.hide('slide-in-bottom', 200);
status = false;
return;
}
subNVue.setStyle({
'position': 'absolute', //除 popup 外，其他值域参考 5+ webview position 文档
'width': '100%',
'height': 'auto',
'left': '0',
'top': '10%'
});
subNVue2.setStyle({
'position': 'absolute', //除 popup 外，其他值域参考 5+ webview position 文档
'width': '100%',
'height': 'auto',
'left': '0',
'top': '10%'
});
subNVue2.show('none', 0, (res) => {
console.log('subNVue2 原生子窗体map成功', res);
});
subNVue.show('slide-in-bottom', 200, (res) => {
console.log('subNVue 原生子窗体order成功', res);
});
status = true;
}
8***@qq.com
- 发布：2023-03-23 10:34
- 更新：2023-03-23 10:37
- 阅读：206
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 22621.1413
HBuilderX类型： 正式
HBuilderX版本号： 3.6.18
手机系统： Android
手机系统版本号： Android 10
手机厂商： 模拟器
手机机型： 华为Mate30
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
打开页面后首次默认打开subNvue页面，之后通过openOrClose 开关 调整是否显示subNvue
打开页面后首次默认打开subNvue页面，之后通过openOrClose 开关 调整是否显示subNvue
预期结果：
通过openOrClose 方法正常控制subNvue页面显示。
通过openOrClose 方法正常控制subNvue页面显示。
实际结果：
在第一次关闭subNvue页面后，点击触发openOrClose 方法再次打开 subNvue, 页面视图没有变化，无法打开。 确认bug是首次subNvue.hide后，之后的subNvue.show 全部无效，但是其中的回调方法却能够正常执行：console.log('subNVue 原生子窗体order成功', res); console.log('subNVue2 原生子窗体map成功', res);
在第一次关闭subNvue页面后，点击触发openOrClose 方法再次打开 subNvue, 页面视图没有变化，无法打开。 确认bug是首次subNvue.hide后，之后的subNvue.show 全部无效，但是其中的回调方法却能够正常执行：console.log('subNVue 原生子窗体order成功', res); console.log('subNVue2 原生子窗体map成功', res);
bug描述：
使用uni.$emit 去操作subNvue页面显示，在第一次调用subNvue.hide之后，后续再次调用subNvue.show 无效。严重影响APP业务流程，我在社区看到2019年就有关于这个BUG的帖子 迟迟没有修复
page.json=>
"subNVues": [{ //订单内容
"id": "order", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取
"path": "pages/customerClient/orderNotReceived/orderInfo", // nvue 路径
"style": {
"position": "absolute",
"width": "100%",
"height":"100%",
"top":"10%",
"margin":"auto",
"background":"transparent",
"disableScroll": true // 不嵌套 scroller
}
},
{ //地图动态光圈内容
"id": "circle", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取
"path": "pages/customerClient/orderNotReceived/map-circle", // nvue 路径
"style": {
"position": "absolute",
"width": "100%",
"height":"100%",
"top":"10%",
"margin":"auto",
"background":"transparent",
"disableScroll": true // 不嵌套 scroller
}
}]
.nvue=>
uni.$emit(‘openCard’）
vue=>
uni.$on('opencard',()=>{
subNvue.hide()
//这里进行vue弹窗交互，用户点击完成后 再次打开subNvue 页面
user => click
subNvue.show('none',0,()=>{
//这里的回调能够触发 ，但是页面视图 完全没有出现nvue的东西 一片空白
这里和预期严重不相符
})
})
1 个回复
8***@qq.com (作者) - helloworld
希望官方能重视这个问题 尽快修复。在原生页面弹窗自定义组件，很需要这个subNvue.show subNvue.hide 的支持。