UNIAPP----video标签层级问题的三种解决方法

uniapp的app端，video标签层级过高，无法轻易被遮盖。

三种解决方法，真机测试没问题。代码复制即可。

1.cover-view或者cover-image，放在video标签内使用，子绝父相

缺点：只能改变cover-view样式，无法嵌套view。具体查看官网讲解。

 
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
script>
 
<style>
 
style>

2.subnvue 创建原生子窗体，放在当前页面下，放好位置即可。

首先创建目录页面，nvue文件。最好放入同级。

 完整代码：

实验页面

 
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			const subNvue = uni.getSubNVueById('subNvue'); // 这个id是pages.json下绑定的唯一id
			// subNvue.hide();//标识初始隐藏
			
			
			//show方法显示，  
			// 下面是初始创建位置  
			// 第一个参数子窗体动画效果
			// 第二个参数持续时间
			// 第三个参数修改样式函数
			subNvue.show('none', 0, () => {
				subNvue.setStyle({
					top: '90px',
					right: '20px',
					width: '90px',
					height: '114px'
				});
			});
 
		},
		methods: {
			
		}
	}
script>
 
<style>
 
style>

子窗体代码

 
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
script>
 
<style>
 
style>

pages.json

{
            "path" : "pages/index/aaa",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"app-plus": {
					"subNVues": [
						{
							"path": "pages/index/subNvue/subNvue",//路径地址
							"id": "subNvue",//唯一id，一个页面下最多三个最好，否则影响性能
							// "type": "popup"  如果是弹窗可开启
							//这个是初始样式，当然初始想隐藏的话，这个不重要
							"style": {
								"width": "100%",
								"height": "100px"
							}
						}
					]
				}
            }
            
        }

3.plus.nativeObj.View()  绘制原生画布，有点击事件。不属于dom，可以覆盖webview和各种原生控件

首先onload时创建画布。

完整代码

 
<script>
	export default {
		data() {
			return {
				view:''
			}
		},
		onLoad() {
			this.view = new plus.nativeObj.View(
				'viewHotFixView',
				{
					top: '132px', // 下面均可用变量控制
					left: '0',
					width: '100%',
					height: '600px',
					position: 'dock'
				},
				[
					{
						tag: 'img',
						id: 'bgroundicon',
						position: {// 下面均可用变量控制
							top: '0px',
							left: '0px',
							width: '100px',
							height: '100px'
						},
						src: '/static/logo.png'
					}
				]
			);
			setTimeout(() => {
				this.view.show();
			}, 300);
			this.view.addEventListener(
				'click',
				e => {
					this.view.hide();
				},
				false
			);
 
		},
		methods: {
			
		}
	}
script>
 
<style>
 
style>

将new plus.nativeObj.View对象赋给this.view

也可以直接写入data前面赋值。不过那样就不能用变量控制宽度。

离开页面记得隐藏，  hide()方法，否则一直在页面上，级别很高。

内置浏览器等无法看到，真机调试没问题。

三种方法基本使用，多看看代码实验几次就知道适合哪种。