本文要介绍的是关于低版本微信(如题)使用cover-view中会出现的一些情况:
问:为什么非要使用cover-view而不是view?
·官方关于cover-view的demo都是把cover-view写在video标签内,在最新的版本中官方也明确说明了是可以舍弃cover-view可以直接写view的,但是如果你们公司业务需求要求必须兼容一些老版本的微信和系统版本,或者是产品设计将图层设计在video上方且面积大于等于视频或与视频交叉显示,那么解决cover-view的所带来的的问题又将重新提上议程。这里就简单列举下我们所遇到且解决的一些问题:
以下所有使用cover-view和cover-image具有相同效果。这里有如下代码块:
<cover-view class=“box”>
<cover-image class=“img” src=“xxx.png”></cover-image>
<cover-view class=“content”></cover-view>
<cover-view>
1、普通渲染的显示隐藏问题:
我们知道,在cover-view里使用visibility:hidden;或者diaplay:none;在低版本的设备中是不生效的,唯一能指望的就是wx:if,在旧版本上wx:if会把后渲染的内容层级升到最高(新版本不会)。建议解决方法:1、将需要wx:if的内容最后渲染出来2、将需要wx:if的内容放到整个wxml的结构的最后面,这样即使是同时渲染也因为排在后面而后渲染从而显示在最上方。
2、在cover-view上使用animation动画后的层级问题:如果在普通的div中,我们假设上面img和content都使用了定位,且img的层级比content高,当我们在content上使用了animation动画,content就会遮住img,通常在普通div中我们解决的方法就是在img上加上translateZ(10px)或者translate3d(0,0,10px)将它的Z轴靠前即可显示,但是在cover-view上一旦在animation动画中改变了Z轴整个动画就会失效。所以,一到这种问题的解决方式还是控制被遮挡块的wx:if渲染时机是最后一个渲染,方法如上(控制时间延时或者放到最后一个渲染的位置上)