問題描述

參照官網在<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)

作者：盛夏光年ltk

出處：https://blog.csdn.net/xhltk316

本部落格所有文章僅用於學習、研究和交流目的，歡迎非商業性質轉載。

博主是利用學習、參考、實踐、複製和貼上等多種方式打造成自己的文章，如有幫助記得點贊！