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

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

    第一步：配置 subNVues

    1. {
    2. 			"path": "pages/index/index",
    3. 			"style": {
    4. 				"navigationBarTitleText": "uni-app",
    5. 				"navigationStyle": "custom",
    6. 				"app-plus": {
    7. 					"titleNView": false, //禁用原生导航栏
    8. 					"subNVues": [{
    9. 							"id": "subnvue", //顶部导航配置
    10. 							"path": "pages/index/subnvue",
    11. 							"type": "navigationBar"
    12. 						},
    13. 						{
    14. 							"id": "drawer",
    15. 							"path": "pages/index/drawer.nvue", // 配置分享弹窗
    16. 							"style": {
    17. 								"position": "popup",
    18. 								"width": "100%",
    19. 								"background": "rgba(0,0,0,0.6)"
    20. 							}
    21. 						}
    22.  
    23. 					]
    24. 				}
    25.  
    26. 			}
    27. 		}

    第二步：分别在index文件夹下建立三个文件分别为：index.vue 、drawer.nvue、subnvue.nvue文件

    第三步：index.vue

    1. <template>
    2. 	<view class="home">
    3. 		<view class="home-h">
    4. 			<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>
    5. 			<view class="home-title-info">
    6. 				<view class="home-title-tips">
    7. 					<text>免费</text>
    8. 					<text>6万+ 人最近报名</text>
    9. 				</view>
    10. 				<view class="home-title">CAD2020速成班【零基础入门到精通】</view>
    11. 			</view>
    12. 		</view>
    13. 		<view class="home-desc">
    14. 			<view class="home-title">课程目录</view>
    15. 			<view class="home-title2">课程名称 : 全栈开发实战视频课程</view>
    16. 			<image
    17. 				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"
    18. 				mode="widthFix"
    19. 				style="margin-top: 20rpx;width: 100%;"
    20. 			></image>
    21. 			<view class="home-text">
    22. 				课程简介：本视频教程由资深全栈工程师团队录制，旨在通过实战项目案例，从零开始让学习者掌握全栈开发技能，包括前端、后端、数据库等方面的知识。课程内容涵盖了
    23. 				HTML、CSS、JavaScript、Vue.js、Node.js、Express、MongoDB 等最新流行的前后端技术，并针对实际应用场景进行详细讲解，让学习者真正理解技术的本质和应用。 课程特点：
    24. 				实战为主，通过逐步构建完整的项目和模块，让学习者在实际操作中熟练掌握技能和方法。 涵盖全栈开发基础知识和高级应用场景，以及备受关注的 Node.js 和 Vue.js 技术。
    25. 				由行业资深工程师团队亲自录制，内容全面且深入浅出，生动易懂，可让初学者或有一定经验的开发人员都能轻松上手。
    26. 				在初级到高级的各个阶段，都配有多个具体难点及技巧的案例视频，让学习者快速掌握开发技能及实战经验。 配备大量代码示例和模板，可以加快学习者自主学习和完成实践任务。
    27. 				目标学习人群：本教程适合对全栈开发感兴趣的学习者，尤其是希望通过实际项目学习完整技术链路的新手和有基础进阶的开发工程师。需要具备一定的编程基础知识，包括
    28. 				HTML、CSS、JavaScript 等，或具备其他编程语言相关经验，如 Python、Java等。
    29. 				<image
    30. 					style="width: 100%;margin: 10rpx 0;"
    31. 					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"
    32. 					mode="widthFix"
    33. 				></image>
    34. 				学习收获： 学习者将掌握最新前后端开发技能，熟练掌握 HTML、CSS、JavaScript 前端语言、Vue.js 前端框架、Node.js 后端语言以及 MongoDB 数据库等技能。
    35. 				了解全栈开发中的综合性条漏和思路，并将学会在真实场景中进行全栈开发，为你的下一次项目积累实战技能。 能够牢固掌握更多前端为服务器准备编写请求与远程响应的知识。
    36. 				让学习者在多样化的实际场景和应用中，把技能转化为实际收益。 学习者将拥有更广阔的职业发展空间，包括全栈工程师、前端开发工程师、后端开发工程师等多个角色。
    37. 				总之，本视频教程是一条涵盖广泛且实用性极高的路径，让学习者不再被单纯粗暴地困住于技术点上，并能真正适应未来更多元需求的研发环境中。
    38. 			</view>
    39. 		</view>
    40. 	</view>
    41. </template>
    42. <script>
    43. export default {
    44. 	components: {},
    45. 	data() {
    46. 		return {
    47. 			videoUrl2: 'https://zhiyuanhuyu.oss-cn-nanjing.aliyuncs.com/uploads/files/b2/dca4476575c9910ce75ffc8c345f16.mp4'
    48. 		};
    49. 	},
    50. 	onLoad() {
    51. 		this.initShowDrawer(1);
    52. 		/**
    53. 		 * 顶部导航
    54. 		 *
    55. 		 * */
    56. 		uni.$on('openShare', res => {
    57. 			if (res.type == 1) {
    58. 				//分享
    59. 				this.initShowDrawer(2);
    60. 			}
    61. 		});
    62. 		/**
    63. 		 * popup弹窗
    64. 		 *
    65. 		 * */
    66. 		uni.$on('funDrawer', res => {
    67. 			if (res.type == 1) {
    68. 				//关闭弹窗
    69. 				this.initShowDrawer(1);
    70. 			}
    71. 		});
    72. 	},
    73. 	methods: {
    74. 		initShowDrawer(type) {
    75. 			if (type == 1) {
    76. 				//关闭
    77. 				uni.getSubNVueById('drawer').hide();
    78. 			} else if (type == 2) {
    79. 				//打开弹窗
    80. 				uni.getSubNVueById('drawer').show();
    81. 			}
    82. 		}
    83. 	}
    84. };
    85. </script>
    86. <style lang="scss">
    87. page {
    88. 	background-color: #f1f1f1;
    89. }
    90. .home {
    91. 	width: 100%;
    92. 	font-size: 24rpx;
    93. 	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    94. 	.home-title2 {
    95. 		width: 100%;
    96. 		font-size: 28rpx;
    97. 		font-weight: 600;
    98. 		margin-top: 20rpx;
    99. 	}
    100. 	.home-text {
    101. 		width: 100%;
    102. 		margin-top: 20rpx;
    103. 		font-size: 24rpx;
    104. 		line-height: 40rpx;
    105. 		color: #666;
    106. 	}
    107. 	.home-desc {
    108. 		width: 100%;
    109. 		background-color: #fff;
    110. 		border-radius: 20rpx 20rpx 0 0;
    111. 		margin-top: 20rpx;
    112. 		padding: 24rpx;
    113. 		box-sizing: border-box;
    114. 		.home-title {
    115. 			width: 100%;
    116. 			font-size: 30rpx;
    117. 			font-weight: 600;
    118. 		}
    119. 	}
    120. 	.home-h {
    121. 		width: 100%;
    122. 		background-color: #fff;
    123. 		border-radius: 0 0 20rpx 20rpx;
    124. 		video {
    125. 			width: 100%;
    126. 			height: 400rpx;
    127. 		}
    128. 		.home-title-info {
    129. 			width: 100%;
    130. 			padding: 24rpx;
    131. 			box-sizing: border-box;
    132. 			.home-title-tips {
    133. 				width: 100%;
    134. 				display: flex;
    135. 				align-items: center;
    136. 				justify-content: space-between;
    137.  
    138. 				text:first-child {
    139. 					color: #ff5500;
    140. 					font-size: 28rpx;
    141. 				}
    142. 				text:last-child {
    143. 					color: #999;
    144. 					font-size: 22rpx;
    145. 				}
    146. 			}
    147. 			.home-title {
    148. 				width: 100%;
    149. 				margin-top: 10rpx;
    150. 				font-size: 30rpx;
    151. 				font-weight: 600;
    152. 			}
    153. 		}
    154. 	}
    155. }
    156. </style>
    157.

     第四步：drawer.nvue

    1. <template>
    2. 	<view class="drawer">
    3. 		<image @click="closePop" class="close" src="../../static/7.png" mode=""></image>
    4. 		<view class="drawer-box-title"><text class="drawer-box-title-text">分享</text></view>
    5. 		<view class="drawer-box">
    6. 			<block v-for="(item, i) in list" :keep-index="i">
    7. 				<view class="drawer-box-item" @click="funShare(item)">
    8. 					<image class="drawer-box-item-img" :src="item.path" mode=""></image>
    9. 					<text class="drawer-box-item-text">{{ item.name }}</text>
    10. 				</view>
    11. 			</block>
    12. 		</view>
    13. 	</view>
    14. </template>
    15.  
    16. <script>
    17. export default {
    18. 	data() {
    19. 		return {
    20. 			list: [
    21. 				{ id: 1, name: 'QQ好友', path: '../../static/3.png' },
    22. 				{ id: 2, name: 'QQ微博', path: '../../static/4.png' },
    23. 				{ id: 3, name: '微信好友', path: '../../static/5.png' },
    24. 				{ id: 4, name: '微信朋友圈', path: '../../static/6.png' }
    25. 			]
    26. 		};
    27. 	},
    28. 	methods: {
    29. 		funShare(item) {
    30. 			uni.showToast({
    31. 				title: item.name,
    32. 				icon:"none"
    33. 			});
    34. 		},
    35. 		closePop() {
    36. 			uni.$emit('funDrawer', {
    37. 				type: 1
    38. 			});
    39. 		}
    40. 	}
    41. };
    42. </script>
    43.  
    44. <style>
    45. .drawer {
    46. 	width: 750rpx;
    47. 	height: 340rpx;
    48. 	padding: 0 24rpx;
    49. 	box-sizing: border-box;
    50. 	background-color: #fff;
    51. 	position: fixed;
    52. 	left: 0;
    53. 	bottom: 0;
    54. 	border-radius: 30rpx 30rpx 0 0;
    55. }
    56. .drawer-box-title {
    57. 	width: 702rpx;
    58. 	padding-bottom: 40rpx;
    59. 	box-sizing: border-box;
    60. 	margin-top: 50rpx;
    61. 	display: flex;
    62. 	flex-direction: row;
    63. 	text-align: center;
    64. 	justify-content: center;
    65. 	border-bottom: 1px solid #f1f1f1;
    66. }
    67. .drawer-box-title-text {
    68. 	font-size: 32rpx;
    69. 	font-weight: 600;
    70. }
    71. .close {
    72. 	width: 70rpx;
    73. 	height: 70rpx;
    74. 	position: absolute;
    75. 	right: 40rpx;
    76. 	top: 35rpx;
    77. }
    78. .drawer-box {
    79. 	width: 702rpx;
    80. 	margin-top: 50rpx;
    81. 	display: flex;
    82. 	align-items: center;
    83. 	flex-direction: row;
    84. }
    85. .drawer-box-item {
    86. 	width: 175.5rpx;
    87. 	display: flex;
    88. 	align-items: center;
    89. 	justify-content: center;
    90. 	flex-direction: column;
    91. }
    92. .drawer-box-item-img {
    93. 	width: 70rpx;
    94. 	height: 70rpx;
    95. }
    96. .drawer-box-item-text {
    97. 	font-size: 26rpx;
    98. 	font-weight: 500;
    99. 	margin-top: 20rpx;
    100. 	color: #666;
    101. }
    102. </style>
    103.

    第五步：subnvue.vue

    1. <template>
    2. 	<view class="subnvue" :style="{ paddingTop: StatusBar + 13 + 'rpx' }">
    3. 		<view class="subnvue-box">
    4. 			<view class="subnvue-box-left"><img @click="goBack" class="arrow" src="./../../static/1.png" alt="" /></view>
    5. 			<view class="subnvue-box-center"><text class="title">课程详情</text></view>
    6. 			<view class="subnvue-box-right"><img @click="share" class="share" src="./../../static/2.png" alt="" /></view>
    7. 		</view>
    8. 	</view>
    9. </template>
    10. <script>
    11. export default {
    12. 	data() {
    13. 		return {
    14. 			StatusBar: getApp().StatusBar
    15. 		};
    16. 	},
    17.  
    18. 	methods: {
    19. 		share(){
    20. 			uni.$emit('openShare', {
    21. 			    type:1
    22. 			
    23. 			});
    24.  
    25. 		},
    26. 		goBack() {
    27. 			uni.showToast({
    28. 				title: '点击了返回按钮',
    29. 				mask: true,
    30. 				duration: 1500
    31. 			});
    32. 		}
    33. 	}
    34. };
    35. </script>
    36.  
    37. <style>
    38. .subnvue {
    39. 	width: 750rpx;
    40. 	background-color: #fff;
    41. }
    42. .subnvue-box {
    43. 	width: 750rpx;
    44. 	height: 88rpx;
    45. 	display: flex;
    46. 	flex-direction: row;
    47. 	padding: 0 24rpx;
    48. 	box-sizing: border-box;
    49. }
    50. .subnvue-box-left {
    51. 	width: 100rpx;
    52. 	height: 88rpx;
    53. 	display: flex;
    54. 	justify-content: center;
    55.  
    56. }
    57. .arrow {
    58. 	width: 21rpx;
    59. 	height: 32rpx;
    60. }
    61. .subnvue-box-center {
    62. 	flex: 1;
    63. 	height: 88rpx;
    64. 	display: flex;
    65. 	align-items: center;
    66. 	justify-content: center;
    67. }
    68. .title {
    69. 	font-size: 32rpx;
    70. 	font-weight: 600;
    71. 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    72. }
    73. .subnvue-box-right {
    74. 	width: 100rpx;
    75. 	height: 88rpx;
    76. 	display: flex;
    77. 	flex-direction: row;
    78. 	align-items: center;
    79. 	justify-content: flex-end;
    80.  
    81. }
    82. .share {
    83. 	width: 36rpx;
    84. 	height: 36rpx;
    85. }
    86. </style>
    87.

    祝：学习愉快、工作顺利

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

    在这里插入图片描述

  • 相关阅读:
    使用Optional和直接返回null，哪个更好？
    Linux-磁盘分区，挂载
    EMQ 助力青岛研博建设智慧水务平台
    [界面开发]DevExpress WinForms流程图控件——XtraDiagrams组件入门指南
    【AUTOSAR-CanIf】-2.2-图解常用Software Filter Algorithm及其应用场景
    原始航片匀色调色方法
    mysql统计所有分类下的数量，没有的也要展示
    Python自学教程5-字符串有哪些常用操作
    app自动化测试——capability 配置参数解析
    CCRC 网络安全技术课程
  • 原文地址：https://blog.csdn.net/lwzhang1101/article/details/134461603