记录微信小程序转uniapp-app端之map遮罩层级的问题

微信小程序可以在的上层放置需要的窗体,如:

效果如图:

转成uniapp后,由于map的层级问题,地图上层并不能放置窗体,使用cover-view也没起作用.
所以转而使用subNVue,虽然较为复杂点,但是确实很灵活,话不多说,

直接上代码

先创建nvue页面

目录结构如图:

将其在pages.json中注册

{
			"path": "pages/map/map",
			"style": {
				"app-plus": {
					"subNVues": [{
						"id": "sub", // 唯一标识  
						"path": "pages/map/sub/sub"
					}]
				}
			}
		},

这里的唯一标识id,后面vue页面和nvue页面通讯需要用到

简单的码一个map地图

nvue页面

效果

代码解释

map页面加载时,onload方法中,显示窗体,其方法是:that.showWindow();

showWindow() {
				let sub = uni.getSubNVueById("sub");
				sub.show('slide-in-left', 200, () => {
					console.log('subNVue 原生子窗体显示成功');
				});
				sub.setStyle({
					"position": "absolute",
					"width": "30%",
					"height": "50%",
					"left": "20px",
					"top": "100px",
					"background-color": "#FFFFF",
					"border-top-left-radius": "15px",
					"border-top-right-radius": "15px"
				});
			},

之后再向nvue页面传参,通讯方法是sendMsg(data)

sendMsg(data){
				uni.$emit('sub', {
				    project: data
				});
			},

具体subNvue的配置参数,请看文档:
原生子窗体SubNvue
页面通讯

如有问题,还请不吝赐教!