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

近期有需求，使用video组件播放视频，在使用手机流量的情况下加一层遮罩来提醒，点击按钮关闭遮罩开始播放

• 最好还要加入一行标题，当前正在使用非wifi环境，观看需要使用手机流量

• 因为前期看过cover-*的两个组件，这个场景刚好适合，video作为原生组件，层级最高，使用z-index也不能改变叠放

• cover-view只能嵌套相同cover-*的组件和button

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

1
2
3
4
5
6

<video src="http://xxx.mp4">
    <cover-view>
    当前正在使用非wifi环境，观看需要使用手机流量
        <button>使用流量播放</button>
    </cover-view>
</video>

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

1
2
3
4
5
6
7

<video src="http://xxx.mp4">
    <cover-view>
    当前正在使用非wifi环境，观看需要使用手机流量
        <button>使用流量播放</button>
    </cover-view>
    <cover-image src="http://xxxxx.jpg"></cover-image>
</video>

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

bug1：使用z-index将按钮和标题放在遮罩之上无效

bug2: 编辑器预览正常，但是真机调试后发现图片被cover-view内的标题文字压了下去

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

解决办法

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

• 通过view生成一个跟video等高等宽的块，在view内实现需要的功能，然后再使用wx:if和wx:else去控制提示和视频的显示，可以很轻松的实现想要的效果

这种方法早就应该想到，但是就想着试一试cover-view，搞得很麻烦