【subNVue】uni-app手机调试无法显示地图Map之外组件的问题及解决

2021-07-07 08:00:05 阅读：299 来源： 互联网

问题描述

参照官网在<map>标签里嵌套使用<cover-view>，在浏览器调试可以正常使用，但是在手机APP调试时无法正常显示，一顿百度之后找到原因是vue页面的地图会默认置位最顶层，甚至连导航栏都会覆盖掉，而<cover-view>只适用于小程序且修改z-index也不管用。有的资料说使用nvue页面代替vue页面可以实现，但是nvue页面局限太大，很多东西都无法使用，如导入的ColorUI、onload时获取组件高度宽度甚至api在手机app中都无法调用，因此并不想把写好的整个页面都重写。然后发现了 原生子窗体subNVue，只需要将需要的组件写成nvue页面，以一个原生的popup弹出组件，省去了不少烦恼和工作量。

解决方案

将组件单独写成nvue页面并使用

step1：配置页面

修改page.json文件，添加nvue页面的路径，如：

{  
    "pages": [{  
        "path": "pages/map/map", // 地图目录  
        "style": {  
        	"navigationStyle": "custom"， // 使用自定义的导航栏
            "app-plus": {  
                "subNVues":[{  
                    "id": "subId", // 唯一标识  
                    "path": "pages/map/coverView", // 页面路径 
                    "style": {  // 详见官方文档
                        "position": "absolute",  
                        "top": "200rpx",
                        "width": "700rpx",  
                        "height": "50%",  
                        "background": "transparent",  // 背景透明
                        "mask": "rgba(0, 0, 0, 0.4)"  // 周围底色
                    }  
                }]  
            }  
        }  
    }]  
}

完整配置

step2：新建页面

根据如上设置的subNVue的路径path新增.nvue文件，注意规范即可

step3：组件调用

map页面根据唯一标识id来调用

// 显示
uni.getSubNVueById("subId").show("soom-fade-out")  // soom-fade-out为显示动画
// 隐藏
uni.getSubNVueById("subId").hide()  // soom-fade-out为显示动画

step4：数据传输

map主页面与nvue子组件相互传值和调用可以通过emit和on来实现
数据接受方监听：

// 开启监听
uni.$on("eventName", (data) => {
	console.log(data)
})
// 取消监听
uni.$off("eventName")

数据发送方触发：

uni.$emit("eventName", data)

标签：Map,nvue,map,app,soom,组件,uni,页面
来源： https://www.cnblogs.com/xhltk316/p/14979795.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。