微信小程序 video組件----真機測試position:fixed無效 且有黑底

1、問題描述

　　video組件fixed后，視頻隨頁面滾動，且有個黑色底停留在頁面。

　　頁面滾動前

　　

　　

　　滾動后

 

這里貼一下修改前代碼，在微信開發者工具看是沒有任何問題的。在手機端測試就有以上的問題

<view style='position:fixed;top:3%;left:5%;overflow:hidden;'>
      <video src='http://video.699pic.com/videos/95/44/45/5FrIddfDqFze1528954445.mp4' enable-danmu danmu-btn controls objectFit="fill" style='width:300px;height:300px;'></video>
</view>


<view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
</view>

 

2、解決辦法

　　將滑動的內容用scroll-view包裹，並且給一個固定的高度，這個高度最高不要用百分比，有時不會起作用，修改后的代碼如下

<view style='position:fixed;top:3%;left:5%;overflow:hidden;'>
      <video src='http://video.699pic.com/videos/95/44/45/5FrIddfDqFze1528954445.mp4' enable-danmu danmu-btn controls objectFit="fill" style='width:300px;height:300px;;'></video>
</view>


<scroll-view scroll-y='true' style='height:667px;'> 
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
      <view style='width:100%;height:500px;'>sadsadsad</view>
</scroll-view>