uni-app/微信小程序video组件层级过高覆盖悬浮按钮

uni-app/微信小程序video组件层级过高覆盖悬浮按钮：

 

一、出现的概率与场景

具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！

 

二、分析：

大体分析说明：

一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view、cover-image时，当滑动到一定距离的时候，悬浮按钮有时也会随着视频被划走，所以的话，需要分情况采用不同的解决方案去处理这个层级过高问题！

具体分析说明

如果要使悬浮按钮放在video之上，有2种情况与对应的解决方案：                                    

第一种：满足以下三个条件

1. 页面的所有内容只占据一屏；
2. video占据一屏；
3. 一屏内容是被fixed;

此情况解决覆盖的方法：采用原生组件cover-view、cover-image等。

第二种：

1、页面内容多于一屏；

这时就需要滑动了，此时使用cover-view与cover-image，会导致一个问题，当向上滑动查看内容的时，当划动到一定的距离时，会导致悬浮按钮有时也被随着视频一起滑动走；

 

三、终极方案：

综上：不管哪种情况，都采用下面解决方法是最保险的，最完美的~

1、解决方案来源：经过排查与多次实验，发现一个问题，当视频还没有播放（即还在加载中时），悬浮按钮就出现时，加载的视频会把悬浮按钮给冲刷走，导致video覆盖了悬浮按钮。如果当视频加载完即开始播放时才显示悬浮按钮，这时就不会出现被覆盖的问题；

解决方法是当视频开始播放（加载完成后）再显示悬浮按钮，就可完美解决上述问题~

具体的操作就是一开始初始化按钮控制条件为false，在@play时将其设置为true;

 

四、终极方案代码展示

五、结果           

               

六、说明   

1. 小程序中是一样的解决思路~
2. 如果video没占据一屏，且悬浮按钮不在video上，在页面上，那就无须使用上面两种方案了，就用正常的标签与加载时间就可以了。因为不在video，何谈video覆盖问题。