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

時間 2019-11-11

標籤微信程序 video 組件測試 position fixed 無效且有欄目 CSS 简体版

原文原文鏈接

一、問題描述微信

　　video組件fixed後，視頻隨頁面滾動，且有個黑色底停留在頁面。微信開發

　　頁面滾動前ide

　　滾動後工具

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

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

二、解決辦法spa

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

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