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覆蓋問題。