小程序使用scroll-view組件視頻固定頂部

ideo如果用fixed屬性固定在頁面頂部,在手機上滑動時,視頻會跟著滾動,并且會在頂部留下一個黑匣子。

這里我們不用fixed屬性,而是把頁面分為兩部分,上部分為視頻,下部分為滾動區域,滾動區域用scroll-view包裹,給scroll-view組件設置固定高度,并在在頁面的json文件中設置禁止頁面滾動就可以啦。。。

上代碼

wxml

<view class='video'> <video src='你的視頻路徑'></video>

</view>

<scroll-view class='scrollView' scroll-y=true> 這里是視頻以下的內容 </scroll-view>

樣式

.scrollView{ height:750rpx; //一定要設置scroll-view的固定高度 }

json文件

{ "disableScroll": true //禁止頁面滾動,這個是當前頁面的配置文件,不是app.json }

如果你想隱藏scroll-view的滾動條

在css里面加上

::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

注意冒號前面不加標簽,直接放上就可以。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。