1. 程式人生 > >微信小程序 video組件----真機測試position:fixed無效 且有黑底

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

overflow ron 分享圖片 clas fixed 百分比 flow 無效 fit

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>

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