hbuildX版本:4.24
uniapp:vue3(默认模板,不包含uniapp-x)
注:只是分享,之前是做pc端的,刚接触uniapp,不清楚这个问题在历代uniapp更新中是否被解决,但是我在开发中遇到了,所以就发出来了。
情景描述:在一个除顶部菜单的全屏地图中,添加自定义控件,因为map地图层级很高,故使用subnvues,进行控件展示,包含两个方形小按钮,一个是定位自己,一个是点击进行弹窗,在弹窗中在进行操作,然后就发现了退出当前路由,再进入时,弹窗会出现重复!
![](http://img-cdn-tc.dcloud.net.cn/uploads/article/20240923/bf8f96b22d8f95bc21e11fbae6dc7e0d.jpg)
解决办法:反正是困扰了一下午,无意中发现,将地图代码注释之后,再执行退出进入的操作,就不会出现这种情况,经过漫长的时间琢磨,给地图组件加上v-if,一是在subnvues弹窗之前将地图隐掉,执行完弹窗操作后,再显示出来,就只是一瞬,有用,二是,在退出当前页面时提前将地图隐掉,再执行页面跳转,就一个异步执行代码;
//打开菜单弹窗
const OpenMenuPopu = ()=>{
MapIsShow.value = false;
ChoiceMenuExample.value = uni.getSubNVueById('MultipleChoiceMenu');
ChoiceMenuExample.value.show('slide-in-bottom',600);
uni.$emit('FatherCheckboxValue',FatherCheckboxValue.value)
MapIsShow.value = true;
}
//返回首页
const GoHome = () => {
MapIsShow.value = false;
MyAMap.value = null;
let time = setTimeout(()=>{
uni.redirectTo({
url: '/pages/Home/index'
});
clearTimeout(time);
},10)
uni.$emit('FatherCheckboxValue',[]);
uni.$off('SearchData')
uni.$off('FatherCheckboxValue')
uni.$off('ControlID')
uni.$off('CheckboxValue')
}
onBackPress(()=>{
GoHome();
return true;
})