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

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

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

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

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

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

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

要在微信小程序中实现文本覆盖图片,可以使用 canvas 画布来处理,首先将原图片作为茄备背景,在画布上再绘制文字即可。 另外颤弯毁,还可以使用 css 中的 position 属性和 z-index 属性闹岁来实现,即先将图片作为背景,再利用 position 定位文字并设置相应的 z-index 属性来避免被图片所覆盖。

一般来说tabbar为小程序的最含隐首高级,view覆盖不了的。

网上大多数指的都是uni中app-plus,h5/app而非小程序。

但是可以变相的通过设置标题颜色和tabbar颜色谈数实现,自定义因不考虑单个影响全部故弃用。

以u-view中u-modal示范。

ps:

borderStyle只能为white或black

frontColor只能为#000或#fff,写错任何一项不会生效。

本质为替换了高亮时的cion和背景色伪实现

不足是tabbar边框只有white/black,切需要设计配合给出遮罩下图。

【参考资携茄料】 https://blog.csdn.net/liujucai/article/details/103816123


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

原文地址: http://outofmemory.cn/yw/12538276.html

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

发表评论

登录后才能评论

评论列表(0条)

保存