uni-app/微信小程序video组件层级过高覆盖悬浮按钮：
一、出现的概率与场景
具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！
二、分析：
大体分析说明：
一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view、cover-image时，当滑动到一定距离的时候，悬浮按钮有时也会随着视频被划走，所以的话，需要分情况采用不同的解决方案去处理这个层级过高问题！
具体分析说明
如果要使悬浮按钮放在video之上，有2种情况与对应的解决方案：
第一种：满足以下三个条件
- 页面的所有内容只占据一屏；
- video占据一屏；
- 一屏内容是被fixed;
此情况解决覆盖的方法：采用原生组件cover-view、cover-image等。
第二种：
1、页面内容多于一屏；
这时就需要滑动了，此时使用cover-view与cover-image，会导致一个问题，当向上滑动查看内容的时，当划动到一定的距离时，会导致悬浮按钮有时也被随着视频一起滑动走；
三、终极方案：
综上：不管哪种情况，都采用下面解决方法是最保险的，最完美的~
1、解决方案来源：经过排查与多次实验，发现一个问题，当视频还没有播放（即还在加载中时），悬浮按钮就出现时，加载的视频会把悬浮按钮给冲刷走，导致video覆盖了悬浮按钮。如果当视频加载完即开始播放时才显示悬浮按钮，这时就不会出现被覆盖的问题；
解决方法是当视频开始播放（加载完成后）再显示悬浮按钮，就可完美解决上述问题~
具体的操作就是一开始初始化按钮控制条件为false，在@play时将其设置为true;
四、终极方案代码展示
<template>
<view class="">
<!-- @play:当视频开始/继续播放时触发 -->
<view class="video-wrap">
<video :src="path" controls @play="play" autoplay="true" style="height:100vh;"></video>
</view>
<!-- 悬浮按钮 -->
<view class="btn-wrap" v-if="btn">
<button type="primary" class="btn-transparent">悬浮按钮一</button>
<button type="primary" class='btn-transparent'>悬浮按钮二</button>
</view>
<view class="list">很长很长的一个列表~</view>
</view>
</template>
<script>
export default {
data() {
return {
path: "https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]",
btn: false //控制悬浮按钮
}
},
methods: {
play: function() {
this.btn = true;
}
}
}
</script>
<style>
.video-wrap {
width: 750rpx;
height: 100vh;
display: flex;
justify-content: center;
},
.btn-wrap{
position: fixed;
right:20rpx;
bottom: 20vh;
},
.list{
height:2000rpx;
background-color:#336699;
text-align: center;
margin-top:200rpx;
}
</style>
五、结果
六、说明
- 小程序中是一样的解决思路~
- 如果video没占据一屏，且悬浮按钮不在video上，在页面上，那就无须使用上面两种方案了，就用正常的标签与加载时间就可以了。因为不在video，何谈video覆盖问题。
