【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

news2024/11/26 12:39:22

uniapp 顶部导航和弹窗被video遮挡解决办法

第一步：配置 subNVues

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"navigationStyle": "custom",
				"app-plus": {
					"titleNView": false, //禁用原生导航栏
					"subNVues": [{
							"id": "subnvue", //顶部导航配置
							"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文件夹下建立三个文件分别为：index.vue 、drawer.nvue、subnvue.nvue文件

第三步：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>免费</text>
					<text>6万+ 人最近报名</text>
				</view>
				<view class="home-title">CAD2020速成班【零基础入门到精通】</view>
			</view>
		</view>
		<view class="home-desc">
			<view class="home-title">课程目录</view>
			<view class="home-title2">课程名称 : 全栈开发实战视频课程</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">
				课程简介：本视频教程由资深全栈工程师团队录制，旨在通过实战项目案例，从零开始让学习者掌握全栈开发技能，包括前端、后端、数据库等方面的知识。课程内容涵盖了
				HTML、CSS、JavaScript、Vue.js、Node.js、Express、MongoDB 等最新流行的前后端技术，并针对实际应用场景进行详细讲解，让学习者真正理解技术的本质和应用。 课程特点：
				实战为主，通过逐步构建完整的项目和模块，让学习者在实际操作中熟练掌握技能和方法。 涵盖全栈开发基础知识和高级应用场景，以及备受关注的 Node.js 和 Vue.js 技术。
				由行业资深工程师团队亲自录制，内容全面且深入浅出，生动易懂，可让初学者或有一定经验的开发人员都能轻松上手。
				在初级到高级的各个阶段，都配有多个具体难点及技巧的案例视频，让学习者快速掌握开发技能及实战经验。 配备大量代码示例和模板，可以加快学习者自主学习和完成实践任务。
				目标学习人群：本教程适合对全栈开发感兴趣的学习者，尤其是希望通过实际项目学习完整技术链路的新手和有基础进阶的开发工程师。需要具备一定的编程基础知识，包括
				HTML、CSS、JavaScript 等，或具备其他编程语言相关经验，如 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>
				学习收获： 学习者将掌握最新前后端开发技能，熟练掌握 HTML、CSS、JavaScript 前端语言、Vue.js 前端框架、Node.js 后端语言以及 MongoDB 数据库等技能。
				了解全栈开发中的综合性条漏和思路，并将学会在真实场景中进行全栈开发，为你的下一次项目积累实战技能。 能够牢固掌握更多前端为服务器准备编写请求与远程响应的知识。
				让学习者在多样化的实际场景和应用中，把技能转化为实际收益。 学习者将拥有更广阔的职业发展空间，包括全栈工程师、前端开发工程师、后端开发工程师等多个角色。
				总之，本视频教程是一条涵盖广泛且实用性极高的路径，让学习者不再被单纯粗暴地困住于技术点上，并能真正适应未来更多元需求的研发环境中。
			</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);
		/**
		 * 顶部导航
		 *
		 * */
		uni.$on('openShare', res => {
			if (res.type == 1) {
				//分享
				this.initShowDrawer(2);
			}
		});
		/**
		 * popup弹窗
		 *
		 * */
		uni.$on('funDrawer', res => {
			if (res.type == 1) {
				//关闭弹窗
				this.initShowDrawer(1);
			}
		});
	},
	methods: {
		initShowDrawer(type) {
			if (type == 1) {
				//关闭
				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

<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: '点击了返回按钮',
				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>

祝：学习愉快、工作顺利

温馨提示：源码获取方式 关注【码农园区】 回复   “ video”   

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1219341.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信抽奖活动怎么做

微信抽奖活动怎么做

微信抽奖活动&#xff1a;打破传统&#xff0c;创新互动&#xff0c;带给你超乎想象的惊喜体验&#xff01; 随着互联网的飞速发展&#xff0c;人们越来越热衷于参与各种线上活动。而微信&#xff0c;作为中国最大的社交平台之一&#xff0c;自然成为了各种活动的聚集地。今天…
阅读更多...
本地MQTT协议消息服务远程连接教程介绍

本地MQTT协议消息服务远程连接教程介绍

Mosquitto是一个开源的消息代理&#xff0c;它实现了MQTT协议版本3.1和3.1.1。它可以在不同的平台上运行&#xff0c;包括Windows、Linux、macOS等。mosquitto可以用于物联网、传感器、移动应用程序等场景&#xff0c;提供了一种轻量级的、可靠的、基于发布/订阅模式的消息传递…
阅读更多...
数据仓库-数仓架构

数据仓库-数仓架构

1 数据仓库建设方法论 1.1 项目背景 数据仓库将建设成为融通全公司数据资产&#xff0c;提供便捷数据分析和数据服务&#xff0c;支持全公司数字化经营与创新。 1.2 数据仓库概述 数据仓库是一个面向主题的、集成的、相对稳定的、反映有历史变化的数据集合&#xff0c;用于…
阅读更多...
芸鹰蓬飞：抖店服务分怎么快速升分？

芸鹰蓬飞：抖店服务分怎么快速升分？

在这个平台上&#xff0c;抖店服务分数的高低直接关系到商家在抖音平台上的曝光和信任度。那么&#xff0c;如何快速提升抖店服务分&#xff0c;成为了广大商家亟需解决的问题。本文将从多个角度&#xff0c;深入探讨提升抖店服务分的有效方法。 一、了解抖店服务分的评估标准 …
阅读更多...
高阶数据结构---树状数组

高阶数据结构---树状数组

文章目录 楼兰图腾一个简单的整数问题 一个简单的整数问题2谜一样的牛 一、楼兰图腾OJ链接 二、一个简单的整数问题OJ链接 三、一个简单的整数问题2OJ链接 四、谜一样的牛OJ链接
阅读更多...
盘点十大免费低/无代码开发软件，数字化转型看这里

盘点十大免费低/无代码开发软件，数字化转型看这里

在数字化日益普及的当下&#xff0c;低代码开发技术逐渐受到大众的追捧。这种技术让缺乏编程经验的大众也能轻松创建应用程序和网站。通过直观的图形界面和拖拽功能&#xff0c;用户可以无需编写任何代码&#xff0c;轻松实现自己的开发需求。本文将为您介绍十大免费的低代码开…
阅读更多...
AI视频检索丨历史视频标签化，助力重要事件高效溯源

AI视频检索丨历史视频标签化，助力重要事件高效溯源

随着科技的不断发展&#xff0c;安全监控已成为我们生活中不可或缺的一部分。当发生盗窃、人员走失、安全事故等重要事件时&#xff0c;常常需要通过查看视频回放了解事情经过&#xff0c;为解决问题提供证据或指明查找方向。但是&#xff0c;人工查看视频回放往往费时费力&…
阅读更多...
【嵌入式开发学习】__扒一扒单片机串口IAP原理

【嵌入式开发学习】__扒一扒单片机串口IAP原理

一、什么是IAP&#xff1f; IAP 是 In Application Programming 的首字母缩写&#xff0c;IAP是用户自己的程序在运行过程中对 User Flash 的部分区域进行烧写&#xff0c;目的是为了在产品发布后可以方便地通过预留的通信口对产品中的固件程序进行更新升级。 在重新编程过程…
阅读更多...
深入Android S(12.0) 探索 Android Framework 之 SystemServer 进程启动详解

深入Android S(12.0) 探索 Android Framework 之 SystemServer 进程启动详解

深入学习 Android Framework 第三&#xff1a;深入Android S(12.0) 探索 Android Framework 之 SystemServer 进程启动详解 文章目录 深入学习 Android Framework前言一、Android 系统的启动流程1. 流程图2. 启动流程概述 二、源码详解1. 时序图2. 源代码1、ZygoteInit # main…
阅读更多...
草图大师SketchUp Pro 2023

草图大师SketchUp Pro 2023

SketchUp Pro 2023 for Mac&#xff08;草图大师&#xff09;是一款三维建模软件&#xff0c;由Trimble Inc.开发。它可以用于创建、修改和分享3D模型&#xff0c;包括建筑、家具、景观等。 SketchUp Pro 2023 for Mac提供了简单易学的用户界面和强大的工具集&#xff0c;使用…
阅读更多...
数据库表数据类型datetime 和 timestamp区别，以及优缺点

数据库表数据类型datetime 和 timestamp区别，以及优缺点

datetime和timestamp都是用于表示日期和时间的数据类型&#xff0c;但它们在存储和使用上有一些区别。 数据范围&#xff1a;datetime数据类型的有效范围是从1000年到9999年&#xff0c;精度为秒。timestamp数据类型的有效范围是从1970年到2038年&#xff0c;精度为秒。存储空…
阅读更多...
element-china-area-data插件vue3做省市区的下拉选择，用3个独立的el-select实现

element-china-area-data插件vue3做省市区的下拉选择，用3个独立的el-select实现

第1版&#xff0c;选择下拉没有优化 第2版&#xff0c;选择下拉时&#xff0c;做了优化
阅读更多...
＜蓝桥杯软件赛＞零基础备赛20周--第6周--数组和队列

＜蓝桥杯软件赛＞零基础备赛20周--第6周--数组和队列

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…
阅读更多...
SystemVerilog学习 （10）——线程控制

SystemVerilog学习 （10）——线程控制

一、概述 在实际硬件中,时序逻辑通过时钟沿来激活,组合逻辑的输出则随着输人的变化而变化。所有这些并发的活动在Verilog 的寄存器传输级上是通过initial和 always块语句、实例化和连续赋值语句来模拟的。为了模拟和检验这些语句块,测试平台使用许多并发执行的线程。在测试平台…
阅读更多...
Python 集成 Nacos 配置中心

Python 集成 Nacos 配置中心

Python 集成 Nacos 配置中心 下载 Nacos 官方 pyhton 库 pip install nacos-sdk-python # 指定国内阿里云镜像源 pip3 install nacos-sdk-python -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com配置 Nacos 相关信息 Global:nacos:port: 8848…
阅读更多...
线下保薪班开启

线下保薪班开启

大家都知道我们有线上班&#xff0c;对于想技能提升的同学来说&#xff0c;线上足以满足技能提升需求&#xff0c;对于想转行找工作&#xff0c;或者学生想就业的同学来说&#xff0c;线上却并不是一个好的选择&#xff0c;担心的可能有:担心自身基础较弱怕学不懂&#xff0c;担…
阅读更多...
一文搞懂 Prompt 编程

一文搞懂 Prompt 编程

大家好&#xff0c;我是木川 一、什么是 Prompt 编程 Prompt 编程是一种基于自然语言处理的编程方式&#xff0c;属于一种创新的编程范式&#xff0c;通过向大模型提供 Prompt&#xff08;提示词&#xff09;&#xff0c;引导其生成特定的文本输出。 与传统的编码方式相比&…
阅读更多...
开发知识点-Git

开发知识点-Git

团队协作-Git Giteegitee 创建仓库打开项目所在目录&#xff0c;右键选择Git Bush Here(你要确定电脑上已经安装了Git&#xff09;初始化本地仓库配置验证信息。 完美解决github访问速度慢介绍Git 与 SVN 区别IDEA 添加 gitee Gitee Git Gitee 大家都知道国内访问 Github 速度…
阅读更多...
简单认识泛型【java】

简单认识泛型【java】

目录 1.什么是泛型 2.引出泛型 2.1语法 3. 泛型类的使用 3.1 语法 4 泛型如何编译的 4.1 擦除机制 5.泛型的上下界 5.1 语法 6.注意 1.什么是泛型 一般的类和方法&#xff0c;只能使用具体的类型: 要么是基本类型&#xff0c;要么是自定义的类。如果要编写可以应用于…
阅读更多...
PS 吸管工具基本使用方法

PS 吸管工具基本使用方法

这里 我们先打开PS软件 我们 在左侧 导航来中 找到 有吸管工具的这一组工具 这边 我们先选择这个 吸管工具 选择之后呢 左上角 属性配置 第一个是 取样大小 这个 我们之前学魔棒工具时 是有接触过的 这里 我们选择 取样点 然后 后面一个是样本 这个 用的最多的是 所有图层 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023