环境:
微信版本号:6.6.6
开发者工具调试基础库:2.2.2
线上最低基础库:2.0.7
手机设备:iphone6P
需求:
视频全屏展示,上面覆盖如图位于底部的元素。
实现:
使用video里内嵌cover-view的官方实现。
问题:
在开发者工具上可以展示。在真机上,视频覆盖元素不显示。
解决方案及过程:
video组件层级最高一直就困扰着开发者,网上一搜,这个的提问者很多,最终找到一个正解,大体意思就是要设置宽高和定位,赶紧调试一番。
1、发现最接近video的cover-view没有设置样式。给其设置相对定位和宽高。修改完之后的效果:
2、发现文本框左侧椭圆部分不在了变成了直角。右边椭圆的出现排除了border-radius支持不友好的可能,猜想是padding-left的原因。于是 给文本再包一层cover-view 通过margin-left与父级 来实现 左间距。修改完之后的效果:
3、又发现文本都好了,但icon仍没有显示。这个icon是通过iconfont来实现的,经各种查找调试,发现仍不能使用,但cover-image能正常显示。最终使用cover-image来代替iconfont来实现图标。
结果:
经过上述调试,在真机上实现了预期的展示:
总结:
video组件,在上面展示的内容,实现需要注意:
1、用内嵌cover-view/cover-image来实现,而且只能是这两个标签,否则会被忽视。
2、要设置定位和宽高,尤其高每一个都要设置。
3、可能对一些样式支持效果不是很好,遇到此类问题,可以多方案调试,实现期望效果,比如:padding-left引起的问题可以通过margin-left来取代处理
4、iconfont在cover-view不显示的问题已经反馈微信团队,有正解了待更新。
ps:很多时候开始发现是未解的,待解决之后发现原来并没什么,😄,希望我们在发现问题解决问题的路上结伴而行孜孜不倦~ 有写的不到之处望能不吝赐教,欢迎随时交流,共勉~ 😊