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 -->
领导:不错哒 小伙子不错。
上面提供了 解决此类问题的思路,因为暂时没有更好的方案解决这个问题。如果有可以 留言,大家一起交流。