uni-app開(kāi)發(fā)的項(xiàng)目中使用video標(biāo)簽設(shè)置視頻做為頁(yè)面背景，video標(biāo)簽層級(jí)過(guò)高，頁(yè)面中內(nèi)容不展示。
官方提供了三種辦法：

1、cover-view、cover-image

cover-這個(gè)標(biāo)簽使用說(shuō)明：這個(gè)標(biāo)簽APP端它不支持嵌套，就是就算這種都是不支持的，所以如果你的頁(yè)面比較復(fù)雜的話(huà)這種方法是不行的，頁(yè)面元素簡(jiǎn)單的話(huà)倒是可以直接用這個(gè)標(biāo)簽解決。

2、subNVue 原生子窗體（我的頁(yè)面比較復(fù)雜我選用的這種方式解決的）

前景：

復(fù)雜的頁(yè)面只有這種方法可以解決：subNvue使用指南
在這里總結(jié)一下nvue寫(xiě)法的特點(diǎn)：
(1)、文本只有寫(xiě)在<text></text>標(biāo)簽內(nèi)設(shè)置顏色字體樣式才有效
(2)、nvue中不支持%，vw，wh，只支持rpx(注意rpx跟vue中的rpx不一樣)，px,用到適配的話(huà)建議用rpx，不用適配的話(huà)用px也可以
(3)、nvue只支持flex布局，默認(rèn)是豎排
(4)、設(shè)置頁(yè)面全屏寫(xiě)法width:750rpx;flex:1
(5)、nvue適配：
默認(rèn)寬都是750，如果你的設(shè)計(jì)稿是1920*1080的，某個(gè)元素40*80，那么它的大小就是寬：（40750)/1920；高就是(80750)/1080；在css中設(shè)置正確的尺寸。
在page.json中設(shè)置：

在manifest.json中設(shè)置：
(6)、文字超出隱藏寫(xiě)法：

NVUE下要用lines這個(gè)屬性，來(lái)讓文字超出隱藏變省略號(hào)

            overflow: hidden;
			lines: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;

下面來(lái)介紹如何使用原生子窗體覆蓋視頻：
在page.json中設(shè)置子窗體：

       {
			"path": "pages/video/index", //設(shè)置視頻的頁(yè)面
			"style": {
				"app-plus": {
					"scrollIndicator": "none", //當(dāng)前頁(yè)面不顯示滾動(dòng)條
					"subNVues": [{
						"id": "content", //子窗體頁(yè)面的id
						"path": "pages/video/subnvue/detail",//頁(yè)面路徑
						"style": { //子窗體樣式，如果需要視頻做背景需要設(shè)置背景透明，寬高百分百
							"width": "100%",
							"height": "100%",
							"background": "transparent",
							"z-index":99
						}
					}]
				}
			}
		},

index.vue頁(yè)面：

<template>
	<view class="detail">
		<video src="../../static/img/bg.mp4" class="video" muted loop :controls="false" object-fit="fill"
			:show-center-play-btn="false" autoplay></video>
	</view>
</template>

<script>
	export default {
		onLoad() {
			let subNVue = uni.getSubNVueById('content') //設(shè)置子窗體
			subNVue.show('slide-in-left', 200, () => {
				console.log('subNVue 原生子窗體顯示成功');
			})
			
		},
		onUnload() {
			uni.getSubNVueById('content').hide('slide-out-left', 200); //頁(yè)面卸載的時(shí)候要隱藏子窗體，子窗體會(huì)一直展示
		}
	}
</script>

<style lang="scss" scoped>
	.video {
		width: 100vw;
		height: 100vh;
	}
</style>

detail.nvue頁(yè)面

<template>
	<view id="content">
		<!-- 頁(yè)面內(nèi)容 -->
	</view>
</template>
<script>
	export default {
	   onLoad() {
			let that = this
			//監(jiān)聽(tīng)接收參數(shù)
			uni.$on('sendParams', function(params) {
				console.log(params)
			})
		},
		onUnload() {
			// 移除監(jiān)聽(tīng)事件
			uni.$off('sendParams');
		},
		beforeCreate() {
		    //設(shè)置自定義字體
			const domModule = uni.requireNativePlugin('dom')
			domModule.addRule('fontFace', {
				'fontFamily': "YouSheBiaoTiHei",
				'src': "url('網(wǎng)絡(luò)地址')"
			});
		}
	}
</script>

注意點(diǎn)：
在nvue中不能直接使用掛載到vue上面的方法，比如封裝的request請(qǐng)求，需要在nvue頁(yè)面單獨(dú)引入使用
例如接口請(qǐng)求需要引入，不能直接使用this.$api：

<script>
import api from '@/api/index'
export default {
    methods:{
        getList(){
           api.getlist().then(res=> {})
         }
    }
}
</script>

傳參使用$emit $on
$emit要在跳轉(zhuǎn)到video這個(gè)頁(yè)面的時(shí)候就要觸發(fā)，要不然子窗體接收不到參數(shù)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-780310.html

// 詳情
goDetail(item) {
	uni.navigateTo({
		url: `/pages/video/index`,
		success: () => {
			uni.$emit('sendParams', {
				id: item.id,
				type:item.type
			});
		}
	})
},

到了這里，關(guān)于video視頻背景層級(jí)過(guò)高解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！