小程序使用cover-view和cover-image

小程序使用cover-view和cover-image,第1张

根据以上需求和限制大致的思路如下:

调整好css后发现, button 并不能挡住 video 组件正中间的播放按钮,对比同类的实现产品,应该是增加了一层遮罩,显示视频预览图,点击播放后消失,于是增加一层 cover-image

通过定位将遮罩的图片铺满video组件,但是产生了以下几个bug:

在网上大致一搜没有很好的解决方法, cover-view 这个组件看来只能够用于一些简单实用的场景,在当前的需求下实现难度很大

通过不断对比同类的产品,我发现了一个实现思路:

1、cover-view是覆盖在原生组件之上的文本视图,只支持嵌套cover-view、cover-image

2、cover-view不支持text-decoration属性设置

3、cover-view设置文本内容换行 white-space: normal(注意flex布局时可能不起效果哦

被覆盖原因是video加载的比cover-view慢,所以我给cover-view做了一个延时显示,暂且是这样解决

注意加载顺序,cover-view应晚于被覆盖组件加载

https://www.jianshu.com/p/3c255f5c94f9

docs Q/A


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/yw/12130808.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存