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

小鱼儿 2021-11-17 07:24 1955阅读 0赞

**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;

四、终极方案代码展示

<template>
    	<view class="">
    		 
    		<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%8B@20181126.mp4",
    				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>

**五、结果    **

![20190730112215681.gif][]

**六、说明  **

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

[20190730112215681.gif]: /images/20211116/c21a50a4d00a4497a4ce98f28831f42b.png