uniapp运用于map上的弹出层

1.前言

由于uniapp中的map等级高，且无法修改。所以我就想直接在页面上弹出一个子页面不就好了。于是我在uniapp中找到了一个功能-------原生子窗体。

2.subNVues

subNVues 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。

3.配置

1.先在pages.json中配置

代码如下

{
	"pages": [{
		"path": "pages/index/index", //首页
		"style": {
			"app-plus": {
				"titleNView": false , //禁用原生导航栏
				"subNVues":[ {//弹出层
					"id": "popup",//页面进行跳转时需要用，必须有，且要唯一
					"path": "pages/index/popup",
					"style": {
						    "position": "absolute",
							"margin": "auto",
							"mask": "rgba(0,0,0,0.5)",
							"width": "80%",
							"height": "80%"
					}

				}]
			}
		}
	}]
}

即，在pages中的要使用这个功能的页面里配置 “subNVues” 。

其中具体的配置细节，见官网：uni-app官网

 注：你创建的子页面一定要是nvue页面，vue页面不能使用。

2.在manifest.json里面配置

在manifest.json 里的app配置中要加上 "nvueCompiler":"weex",   不然会报错。这是由于nvue和vue的样式写法有差别造成的。

3.使用跳转。

1.跳转：

代码如下：

// #ifdef APP-PLUS
				 const subNVue = uni.getSubNVueById('popview') //'popview'就是你在                
                                                               //pages.jsonz中配置的id
				 
				subNVue.show('zoom-fade-out', 300, function(){  
					
				});  
				// #endif

subNVue.show（）里面有三个参数，第一个是 弹出方式，第二个是弹出时间，第三个是回调函数。
                    

2.隐藏原生子窗体：

代码如下：

subNVue.hide('zoom-fade-out', 300);

subNVue.hide()里面有两个参数，第一个是 弹出方式，第二个是弹出时间。

注：其中弹出方式有很多种，具体看官网：uni-app官网

4.页面相互传数据

这里官方推荐使用  uni.$emit 和 uni.$on。

1.传数据

uni.$emit():

 uni.$emit('map-popup',  {
                    //这个对象就是你们传的值
				 	id:e.detail.markerId
				 })  

2.取数据

uni.$on(）

uni.$on('map-popup',(res)=>{
    //res就是你传过来的值

})