代码Github地址

一. 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="https://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    })  }})

原著是一个有趣的人,若有侵权,请通知删除