微信小程序 video組件----真機測試position:fixed無效 且有黑底
阿新 • • 發佈:2018-07-07
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;‘> <videosrc=‘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無效 且有黑底