一. cover-view 能做什么?
在一些情况下，我们需要对map、video、canvas、camera这些微信小程序的原生控件，进行自定义，比如在camera上添加一个矩形线框作为拍照区域，这时我们就需要使用到cover-view这个控件。
在同一父容器中，要在原生控件上添加布局，只能用cover类的控件，因为原生控件的层级处于顶层，即使将非cover类的控件的z-index设置到10000，依然层级在原生控件之下，被覆盖。
在原生控件cover-view作为父容器时，不能使用其他控件嵌套作为子元素，只能使用cover类的控件，例如：cover-view、cover-image。
覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image。
-
cover-view相当于是其他原生容器的拓展，是添加在其他原生容器里面的。相当于原生容器的一部分。
二. 代码展示
- wxml
<video class="video" id='myVideo' src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400">
<cover-view class="controls">
<cover-view class="play" bindtap="play">
<cover-image class="img" src="/images/play.png"></cover-image>
</cover-view>
<cover-view class="pause" bindtap="pause">
<cover-image class="img" src="/images/pause.png"></cover-image>
</cover-view>
</cover-view>
</video>
- wxss
.video {
width: 100%;
height: 200px;
}
.controls {
position: relative;
top: 100%;
height: 50px;
margin-top: -50px;
display: flex;
background-color: red;
justify-content: space-around;
align-items: center;
}
.img {
width: 40px;
height: 40px;
}
- js
Page({
onReady: function (options) {
this.videoCtx = wx.createVideoContext('myVideo')
},
play: function (event) {
this.videoCtx.play()
wx.showToast({
title: '开始播放',
icon: "none",
duration: 1500
})
},
pause: function (event) {
this.videoCtx.pause()
wx.showToast({
title: '暂停播放',
icon: "none",
duration: 1500
})
}
})
