小程序使用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; }

注意冒号前面不加标签,直接放上就可以。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。