需求

最近接到個需求, 需要在video組件上彈出彈窗, 也就是覆蓋video這個原生組件
未播放時, 彈窗可以覆蓋, 但是當(dāng)video播放時, 寫的彈窗就覆蓋不了了
因為video是原生組件, 層級非常高, 普通標簽是覆蓋不了的, map標簽同理
覆蓋原生組件, 官方給出解決辦法一. 使用cover-view標簽 二. 使用subNvue原生子窗體, 或者Nvue
此處因為彈窗樣式比較多元, cover-view不支持嵌套, 故選擇使用subNvue來寫這個彈窗

實現(xiàn)

1. pages.json配置

我這個頁面配置了兩個subnvue

		{
			"path": "pages/player/player1",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"app-plus": {
					// 將回彈屬性關(guān)掉
					"bounce": "none",
					"popGesture": "none",
					"subNVues": [{
						"id": "newMetalModal", // 唯一標識  
						"path": "pages/player/subNVue/newMetalModal", // 頁面路徑  
						// "type": "popup",  // 這里不需要
						"style": {
							"position": "absolute",
							"dock": "top",
							"background": "transparent",
							"margin": "auto"
						}
					}, {
						"id": "cardSuccessModal", // 唯一標識  
						"path": "pages/player/subNVue/cardSuccessModal", // 頁面路徑  
						// "type": "popup",  // 這里不需要
						"style": {
							"position": "absolute",
							"dock": "top",
							"background": "transparent",
							"margin": "auto"
						}
					}]
				}
			}
		}, 

2. 創(chuàng)建nvue文件

官方給出nvue開發(fā)的注意事項, 和vue寫法的區(qū)別, 在此不贅述
傳送門 https://uniapp.dcloud.net.cn/tutorial/nvue-outline.html#nvue%E4%BB%8B%E7%BB%8D

3. 窗體引用與通信

	const subNVue = uni.getSubNVueById('newMetalModal') //設(shè)置子窗體
		subNVue.show('slide-in-left', 200, () => {
		uni.$emit('sendMetalList', {  // 與子窗體通信
			metalList: this.metalList,
			});
		})

	uni.$on('sendMetalList', data => {
		his.metalList = data.metalList;
	});

踩坑記錄

1. 窗體最外部div不能使用v-for循環(huán), 否則會整個窗體不顯示, 需要做循環(huán)的話, 可以在里層做循環(huán)
2. css 背景不支持漸變linear-gradient, 不會生效
3. 界面與窗體通信時, uni.$emit() 需要寫在subNVue.show() 回調(diào)內(nèi), 否則通信失敗
   
4. 只有text標簽可以設(shè)置字體大小，字體顏色。因此文字需要text標簽內(nèi)
5. 開發(fā)過程中發(fā)現(xiàn)修改文件后在真機編譯時, 有時并不能實時編譯, 比如在pages.json配置第二個窗體, 真機沒有生效, 需要重新運行才行
6. 若界面打開就時不需要顯示窗體, onLoad鉤子里需要首先subNvue.hide(), 通過事件再調(diào)用show(), 否則界面打開時就會顯示窗體
7. 寫css時, 只能 .classname{} 編寫, 使用scss嵌套或者繼承等等寫法 .a .b{} .a>.b{} 樣式都會無效

雖然原生窗體實現(xiàn)覆蓋原生標簽的作用, 但開發(fā)起來坑是一個接一個的,
不支持hbx調(diào)試, 必須真機, 而且有時不能實時編譯
樣式和標簽使用上都有局限, 樣式上特別是整個窗體的樣式控制不是很靈活
頁面對窗體顯示隱藏的控制也沒那么靈活, 類似dom元素的控制

subnvue和nvue還存在安卓和ios的兼容問題, 具體這里不細述了 , 主要時間太久忘了~~~~文章來源地址http://www.zghlxwxcb.cn/news/detail-637912.html

到了這里，關(guān)于【uniapp】原生子窗體subNvue的使用與踩坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！