uniapp 视频遮挡顶部导航

页面滑动时 视频会遮盖在顶部导航栏上方

遮挡了上面的导航

方案一

使用nvue重写页面

nvue与vue语法上的区别

1. 不支持padding-top padding-left等
2. background-color要用行内样式
3. nvue页面支持flex布局 不支持其他布局方式 默认采用竖向排列

nvue初次尝试 用不太习惯 后来又遇到引入富文本会莫名的出现闪隐 继续寻找其他办法

方案二（推荐）

用plus.nativeObj.view实现顶部导航 这样顶部导航的层级就会高于 视频了

create() {
			plus.navigator.setStatusBarBackground('#6495ED');
			plus.navigator.setStatusBarStyle('light');
			// #ifdef APP-PLUS
			this.view = new plus.nativeObj.View(
				'bottom-btn',
				{
					top: '0px',
					// paddingTop:'23px',
					'padding-right': '200px',
					left: '0px',
					height: '68px',
					width: '100%',
					backgroundColor: '#ffffff'
				},
				[
					{
						tag: 'font',
						id: 'font',
						text: '门店详情',
						textStyles: {
							size: '15px',
							color: '#000000'
						},
                        //控制位置
						position: {
							top: '18px'
						}
					},
					{
						tag: 'img',
						id: 'img',
						src: 'static/back.png',
						position: {
							top: '38px',
							left: '30px',
							width: '11px',
							height: '20px'
						}
					}
				]
			);
			this.show();
			// #endif
			this.view.addEventListener('click', this.ViewClick, false);//不能在内部控件上添加点击事件

            },
		ViewClick() {
			uni.navigateBack();
		},
		show() {
			if (!this.view) {
				this.create();
				return;
			}
			this.view.show();
		},
		hide() {
			this.view && this.view.hide();
		},
		getDetail(id) {
			console.log(id)
			this.$R.post('/app/showShop/detail', { id }).then(res => {
				this.list = res.data;
			});
		},
		getTo() {
			console.log('kkk');
		}
	},
    //要自己在页面切换的时候控制隐藏出现
	onShow() {
		this.show();
		console.log('出现');
	},
	onUnload() {
		this.hide();
		console.log('隐藏了');
	}

小白一只 也是刚了解到plus.nativeObj.view 去看官方文档 一脸懵 看不懂 还有待学习