uni-app 原生组件覆盖问题 h5等多端可用

uni-app h5 原生组件覆盖问题

注意：此文只做一个解决思路。具体的看你自己的页面。

问题背景：

公众号 分享功能 需要弹出 一张遮罩图片 并指向右上角分享 但是我页面上有 video 组件 会导致遮挡 图片被 原生组件遮挡住。（安卓微信浏览器出现此类问题，ios 没事 ）

领导：这肯定不行 换个方案吧。

我：emmmmm.

解决过程：

一、查看 uni-app 文档
让我用 cover-view 或者 cover-image 悬浮在上面 。 实践了了一波 和我的页面并不符合 我想要一个全屏的遮罩。舍弃。

二、百度 大家的方案
没找到合适的方案 大多数都是在app 上处理当前问题的 、我的app 端没有这玩意 。因为右上角没有分享按钮。 舍弃。

让我看官方文档 和没说一样。没有建设性的意见 。舍弃。

自己解决 nice

想了好久：

安卓播放视频会全屏 然后缩小后 video 组件的层级就非常高。 导致图片不能再原生组件上面。
总所周知 这玩意 不好搞。

方案：

video 能不能先隐藏 然后弹出图片后，关闭图片的时候 video 组件 在显示出来。

说干就干， 使用了状态判断 直接 video 上面加了 v-if 发现 视频 会重新加载。 于是用了 v-show。

点击分享按钮 - 隐藏 video 组件 - 弹出分享图片 - 图片分享关闭- 显示 video 组件

注意：
v-show 会出现 空白屏幕 这个地方我是用 视频封面解决的这个问题。

点击分享按钮 - 隐藏 video 组件 - 用封面图片盖住 video组件 - 弹出分享图片 -
分享图片关闭- 隐藏封面图片-显示 video 组件

到此完美解决这个问题。

效果图：

代码：

			<!-- #ifdef H5 -->
			<view class="lecture-play-video-view uni-flex position-fixed " style="top:0,z-index: 999999;" v-if="!status">
				<image :src="coverUrl" class="lecture-play-video" ></image>
			</view>
			
			<view class="lecture-play-video-view ">
				<video id="myVideo" class="lecture-play-video" :duration="duration" :autoplay="autoplay" :poster="coverUrl" :src="videoUrl" v-show="status"
				 @error="videoErrorCallback" enable-danmu page-gesture controls show-center-play-btn @ended="playNext()">
				 </video>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="lecture-play-video-view ">
				<video id="myVideo" class="lecture-play-video" :duration="duration" :autoplay="autoplay" :poster="coverUrl" :src="videoUrl"
				 @error="videoErrorCallback" enable-danmu page-gesture controls show-center-play-btn @ended="playNext()">
				 </video>
			</view>
			<!-- #endif -->

领导：不错哒 小伙子不错。

上面提供了 解决此类问题的思路，因为暂时没有更好的方案解决这个问题。如果有可以 留言，大家一起交流。

有问题 qq 1019011560 可以联系我。