【uniapp】 video視頻層級(jí)、遮擋其他彈窗或頂部導(dǎo)航使用nvue覆蓋

這篇具有很好參考價(jià)值的文章主要介紹了【uniapp】 video視頻層級(jí)、遮擋其他彈窗或頂部導(dǎo)航使用nvue覆蓋。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

uniapp 頂部導(dǎo)航和彈窗被video遮擋解決辦法

全部代碼請(qǐng)前往dcloud 視頻播放器解決video視頻遮擋頂部導(dǎo)航、遮擋分享彈窗組件層級(jí) 下載
話不多說直接來干貨

示例圖片：

第一步：配置 subNVues

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"navigationStyle": "custom",
				"app-plus": {
					"titleNView": false, //禁用原生導(dǎo)航欄
					"subNVues": [{
							"id": "subnvue", //頂部導(dǎo)航配置
							"path": "pages/index/subnvue",
							"type": "navigationBar"
						},
						{
							"id": "drawer",
							"path": "pages/index/drawer.nvue", // 配置分享彈窗
							"style": {
								"position": "popup",
								"width": "100%",
								"background": "rgba(0,0,0,0.6)"
							}
						}

					]
				}

			}
		}

第二步：分別在index文件夾下建立三個(gè)文件分別為：index.vue 、drawer.nvue、subnvue.nvue文件

uniapp 彈窗視頻,uniapp,uni-app,vue

第三步：index.vue

<template>
	<view class="home">
		<view class="home-h">
			<video object-fit="cover" :src="videoUrl2" poster="https://img0.baidu.com/it/u=1678650643,2593729507&fm=253&fmt=auto&app=138&f=JPEG?w=906&h=500"></video>
			<view class="home-title-info">
				<view class="home-title-tips">
					<text>免費(fèi)</text>
					<text>6萬+ 人最近報(bào)名</text>
				</view>
				<view class="home-title">CAD2020速成班【零基礎(chǔ)入門到精通】</view>
			</view>
		</view>
		<view class="home-desc">
			<view class="home-title">課程目錄</view>
			<view class="home-title2">課程名稱 : 全棧開發(fā)實(shí)戰(zhàn)視頻課程</view>
			<image
				src="https://img1.baidu.com/it/u=2412284462,1528860568&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685552400&t=00023e9d720d0d598b47044bc7078124"
				mode="widthFix"
				style="margin-top: 20rpx;width: 100%;"
			></image>
			<view class="home-text">
				課程簡(jiǎn)介：本視頻教程由資深全棧工程師團(tuán)隊(duì)錄制，旨在通過實(shí)戰(zhàn)項(xiàng)目案例，從零開始讓學(xué)習(xí)者掌握全棧開發(fā)技能，包括前端、后端、數(shù)據(jù)庫(kù)等方面的知識(shí)。課程內(nèi)容涵蓋了
				HTML、CSS、JavaScript、Vue.js、Node.js、Express、MongoDB 等最新流行的前后端技術(shù)，并針對(duì)實(shí)際應(yīng)用場(chǎng)景進(jìn)行詳細(xì)講解，讓學(xué)習(xí)者真正理解技術(shù)的本質(zhì)和應(yīng)用。 課程特點(diǎn)：
				實(shí)戰(zhàn)為主，通過逐步構(gòu)建完整的項(xiàng)目和模塊，讓學(xué)習(xí)者在實(shí)際操作中熟練掌握技能和方法。 涵蓋全棧開發(fā)基礎(chǔ)知識(shí)和高級(jí)應(yīng)用場(chǎng)景，以及備受關(guān)注的 Node.js 和 Vue.js 技術(shù)。
				由行業(yè)資深工程師團(tuán)隊(duì)親自錄制，內(nèi)容全面且深入淺出，生動(dòng)易懂，可讓初學(xué)者或有一定經(jīng)驗(yàn)的開發(fā)人員都能輕松上手。
				在初級(jí)到高級(jí)的各個(gè)階段，都配有多個(gè)具體難點(diǎn)及技巧的案例視頻，讓學(xué)習(xí)者快速掌握開發(fā)技能及實(shí)戰(zhàn)經(jīng)驗(yàn)。 配備大量代碼示例和模板，可以加快學(xué)習(xí)者自主學(xué)習(xí)和完成實(shí)踐任務(wù)。
				目標(biāo)學(xué)習(xí)人群：本教程適合對(duì)全棧開發(fā)感興趣的學(xué)習(xí)者，尤其是希望通過實(shí)際項(xiàng)目學(xué)習(xí)完整技術(shù)鏈路的新手和有基礎(chǔ)進(jìn)階的開發(fā)工程師。需要具備一定的編程基礎(chǔ)知識(shí)，包括
				HTML、CSS、JavaScript 等，或具備其他編程語言相關(guān)經(jīng)驗(yàn)，如 Python、Java等。
				<image
					style="width: 100%;margin: 10rpx 0;"
					src="https://img2.baidu.com/it/u=1711732258,3382239816&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685552400&t=1814a851132581dc5773480345b497ba"
					mode="widthFix"
				></image>
				學(xué)習(xí)收獲： 學(xué)習(xí)者將掌握最新前后端開發(fā)技能，熟練掌握 HTML、CSS、JavaScript 前端語言、Vue.js 前端框架、Node.js 后端語言以及 MongoDB 數(shù)據(jù)庫(kù)等技能。
				了解全棧開發(fā)中的綜合性條漏和思路，并將學(xué)會(huì)在真實(shí)場(chǎng)景中進(jìn)行全棧開發(fā)，為你的下一次項(xiàng)目積累實(shí)戰(zhàn)技能。 能夠牢固掌握更多前端為服務(wù)器準(zhǔn)備編寫請(qǐng)求與遠(yuǎn)程響應(yīng)的知識(shí)。
				讓學(xué)習(xí)者在多樣化的實(shí)際場(chǎng)景和應(yīng)用中，把技能轉(zhuǎn)化為實(shí)際收益。 學(xué)習(xí)者將擁有更廣闊的職業(yè)發(fā)展空間，包括全棧工程師、前端開發(fā)工程師、后端開發(fā)工程師等多個(gè)角色。
				總之，本視頻教程是一條涵蓋廣泛且實(shí)用性極高的路徑，讓學(xué)習(xí)者不再被單純粗暴地困住于技術(shù)點(diǎn)上，并能真正適應(yīng)未來更多元需求的研發(fā)環(huán)境中。
			</view>
		</view>
	</view>
</template>
<script>
export default {
	components: {},
	data() {
		return {
			videoUrl2: 'https://zhiyuanhuyu.oss-cn-nanjing.aliyuncs.com/uploads/files/b2/dca4476575c9910ce75ffc8c345f16.mp4'
		};
	},
	onLoad() {
		this.initShowDrawer(1);
		/**
		 * 頂部導(dǎo)航
		 *
		 * */
		uni.$on('openShare', res => {
			if (res.type == 1) {
				//分享
				this.initShowDrawer(2);
			}
		});
		/**
		 * popup彈窗
		 *
		 * */
		uni.$on('funDrawer', res => {
			if (res.type == 1) {
				//關(guān)閉彈窗
				this.initShowDrawer(1);
			}
		});
	},
	methods: {
		initShowDrawer(type) {
			if (type == 1) {
				//關(guān)閉
				uni.getSubNVueById('drawer').hide();
			} else if (type == 2) {
				//打開彈窗
				uni.getSubNVueById('drawer').show();
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f1f1f1;
}
.home {
	width: 100%;
	font-size: 24rpx;
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	.home-title2 {
		width: 100%;
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}
	.home-text {
		width: 100%;
		margin-top: 20rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #666;
	}
	.home-desc {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		.home-title {
			width: 100%;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.home-h {
		width: 100%;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		video {
			width: 100%;
			height: 400rpx;
		}
		.home-title-info {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			.home-title-tips {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text:first-child {
					color: #ff5500;
					font-size: 28rpx;
				}
				text:last-child {
					color: #999;
					font-size: 22rpx;
				}
			}
			.home-title {
				width: 100%;
				margin-top: 10rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
}
</style>

第四步：drawer.nvue

<template>
	<view class="drawer">
		<image @click="closePop" class="close" src="../../static/7.png" mode=""></image>
		<view class="drawer-box-title"><text class="drawer-box-title-text">分享</text></view>
		<view class="drawer-box">
			<block v-for="(item, i) in list" :keep-index="i">
				<view class="drawer-box-item" @click="funShare(item)">
					<image class="drawer-box-item-img" :src="item.path" mode=""></image>
					<text class="drawer-box-item-text">{{ item.name }}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{ id: 1, name: 'QQ好友', path: '../../static/3.png' },
				{ id: 2, name: 'QQ微博', path: '../../static/4.png' },
				{ id: 3, name: '微信好友', path: '../../static/5.png' },
				{ id: 4, name: '微信朋友圈', path: '../../static/6.png' }
			]
		};
	},
	methods: {
		funShare(item) {
			uni.showToast({
				title: item.name,
				icon:"none"
			});
		},
		closePop() {
			uni.$emit('funDrawer', {
				type: 1
			});
		}
	}
};
</script>

<style>
.drawer {
	width: 750rpx;
	height: 340rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	border-radius: 30rpx 30rpx 0 0;
}
.drawer-box-title {
	width: 702rpx;
	padding-bottom: 40rpx;
	box-sizing: border-box;
	margin-top: 50rpx;
	display: flex;
	flex-direction: row;
	text-align: center;
	justify-content: center;
	border-bottom: 1px solid #f1f1f1;
}
.drawer-box-title-text {
	font-size: 32rpx;
	font-weight: 600;
}
.close {
	width: 70rpx;
	height: 70rpx;
	position: absolute;
	right: 40rpx;
	top: 35rpx;
}
.drawer-box {
	width: 702rpx;
	margin-top: 50rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
}
.drawer-box-item {
	width: 175.5rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.drawer-box-item-img {
	width: 70rpx;
	height: 70rpx;
}
.drawer-box-item-text {
	font-size: 26rpx;
	font-weight: 500;
	margin-top: 20rpx;
	color: #666;
}
</style>

第五步：subnvue.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-656734.html

<template>
	<view class="subnvue" :style="{ paddingTop: StatusBar + 13 + 'rpx' }">
		<view class="subnvue-box">
			<view class="subnvue-box-left"><img @click="goBack" class="arrow" src="./../../static/1.png" alt="" /></view>
			<view class="subnvue-box-center"><text class="title">課程詳情</text></view>
			<view class="subnvue-box-right"><img @click="share" class="share" src="./../../static/2.png" alt="" /></view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			StatusBar: getApp().StatusBar
		};
	},

	methods: {
		share(){
			uni.$emit('openShare', {
			    type:1
			
			});

		},
		goBack() {
			uni.showToast({
				title: '點(diǎn)擊了返回按鈕',
				mask: true,
				duration: 1500
			});
		}
	}
};
</script>

<style>
.subnvue {
	width: 750rpx;
	background-color: #fff;
}
.subnvue-box {
	width: 750rpx;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	padding: 0 24rpx;
	box-sizing: border-box;
}
.subnvue-box-left {
	width: 100rpx;
	height: 88rpx;
	display: flex;
	justify-content: center;

}
.arrow {
	width: 21rpx;
	height: 32rpx;
}
.subnvue-box-center {
	flex: 1;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.title {
	font-size: 32rpx;
	font-weight: 600;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.subnvue-box-right {
	width: 100rpx;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;

}
.share {
	width: 36rpx;
	height: 36rpx;
}
</style>

到了這里，關(guān)于【uniapp】 video視頻層級(jí)、遮擋其他彈窗或頂部導(dǎo)航使用nvue覆蓋的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！