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

这篇具有很好参考价值的文章主要介绍了【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

全部代码 请前往dcloud 视频播放器 解决video视频遮挡顶部导航、 遮挡分享弹窗 组件层级 下载
话不多说 直接来干货

示例图片:
uniapp 弹窗视频,uniapp,uni-app,vue
uniapp 弹窗视频,uniapp,uni-app,vue

第一步:配置 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文件

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>免费</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">
				课程简介:本视频教程由资深全栈工程师团队录制,旨在通过实战项目案例,从零开始让学习者掌握全栈开发技能,包括前端、后端、数据库等方面的知识。课程内容涵盖了
				HTMLCSS、JavaScript、Vue.js、Node.js、Express、MongoDB 等最新流行的前后端技术,并针对实际应用场景进行详细讲解,让学习者真正理解技术的本质和应用。 课程特点:
				实战为主,通过逐步构建完整的项目和模块,让学习者在实际操作中熟练掌握技能和方法。 涵盖全栈开发基础知识和高级应用场景,以及备受关注的 Node.js 和 Vue.js 技术。
				由行业资深工程师团队亲自录制,内容全面且深入浅出,生动易懂,可让初学者或有一定经验的开发人员都能轻松上手。
				在初级到高级的各个阶段,都配有多个具体难点及技巧的案例视频,让学习者快速掌握开发技能及实战经验。 配备大量代码示例和模板,可以加快学习者自主学习和完成实践任务。
				目标学习人群:本教程适合对全栈开发感兴趣的学习者,尤其是希望通过实际项目学习完整技术链路的新手和有基础进阶的开发工程师。需要具备一定的编程基础知识,包括
				HTMLCSS、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>
				学习收获: 学习者将掌握最新前后端开发技能,熟练掌握 HTMLCSS、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文章来源地址https://www.toymoban.com/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: '点击了返回按钮',
				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>

到了这里,关于【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于uniapp小程序内置canvas标签层级过高,覆盖其他标签问题

    uniapp 原因:是因为canvas是原生组件,而uniapp的 view、text 等标签相当于二次封装过的,给予z-index也是不生效的,微信开发者工具没有问题,但真机测试会爆这个雷 恰巧碰上一个需求需要一个canvas生成图片放在页面,点击按钮后生成一个二维码模态框,二维码也是canvas生成图

    2024年02月12日
    浏览(72)
  • uniapp视频层级问题

    需求:底部操作框在最高层级 问题:视频遮挡住了操作框 参考博客-video标签层级问题 官方文档说明 解决①:使用cover-view 参考文档-cover-view 1. 使用方式:在需要覆盖的video里面使用 2. 最终效果 只能子绝父相覆盖视频,fixed固定定位仍然不能覆盖视频,不符合我的需求 解决②

    2024年04月10日
    浏览(38)
  • uniapp-app视频层级过高问题

    使用v-html动态渲染 参考:uniapp video app端层级过高的问题,滑动渲染问题。_video在app端层级过高-CSDN博客 有想过使用原生,但是太麻烦了,然后换成了弹窗播放,但是动态的src播放失败,错误提示: chunk-vendors.js:14882 Uncaught (in promise) DOMException: The element has no supported sources.  

    2024年01月21日
    浏览(73)
  • 微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo

    一个页面同时有很多视频播放,当用户点击一个视频后,开始播放视频,当点击另一个视频后,暂停前一个播放视频,让当前页面只有一个视频处于播放状态 原理 播放视频时,先判断当前是否有视频正在播放,如果没有,则播放,如果有,则暂停其他视频,再播放当前视频

    2024年02月04日
    浏览(88)
  • uniapp视频video

    播放暂停视频 不允许快进,可以后退 视频后退不会影响最高观看时长,例如看了10分钟,后退5分钟,观看时长依然是600秒 监听退出记录观看时间,下次进来接着看 视频看完积分 自定义视频是否有倍速

    2024年02月11日
    浏览(41)
  • 小程序canvas层级过高真机遮挡组件的解决办法

    在小程序开发中需要上传图片进行裁剪,在实际真机调试中发现canvas层遮挡住了生成图片的按钮。 问题代码 生成、重选的按钮有时会被canvas绘制的图形遮住,根本不能点击触发选中事件。 1、canvas是小程序开发中的绘图工具,可以绘制图形、渲染图形和动画,故很多的情况下

    2024年02月08日
    浏览(59)
  • uniapp-video自定义视频封面

    uniapp官方文档: video | uni-app官网 uni-app,uniCloud,serverless https://uniapp.dcloud.net.cn/uni-app-x/component/video.html#video 主要使用到的是 poster 属性,详细属性可点击上方api进行查看 注意:这个封面的图片需要放到服务器上,在本地会报错 最终展示效果:

    2024年02月03日
    浏览(43)
  • uniapp小程序中使用video视频播放卡顿

    问题:在使用uniapp小程序的video视频播放,视频已经在播放了,但是进度条没走,还是卡顿的状态(测试ios能正常使用,安卓手机会出现此问题) 在网上找了很多方法,最多的说是用:custom-cache=\\\"false\\\",试了并没有效果,看来和我问题不一样,后来用了个简单粗暴的方法,发现是有效果的,以下是

    2024年04月11日
    浏览(44)
  • UGUI 使用 UIParticle 实现 UI 上显示 Particle System 以及 层级遮挡 和 Mask

    UIParticle git 地址 打开上面地址,关于UIParticle 如何使用讲解非常详细 如何安装到Unity 项目?找到 Installation 部分,几种安装方式 下面是 Using Git 方式 关闭Unity,打开 Unity 项目目录找到 Packages/manifest.json 添加如下代码 然后用Unity 打开项目,将自动开始导入并安装,如果弹窗提

    2024年02月07日
    浏览(39)
  • 【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件

    之前的问题图片如下: 最开始想到的方案是降低canvas的层级,但是canvas是原生组件,他的层级是没法改变 所以又想到改变vant组件的层级,但是一样无果。。。 随后,看到网上大篇幅的都是使用显示隐藏来操控picker的,这样会如果页面可以滑动,就导致用户还是可以看到ec

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包