037 ∞ 视图容器：cover-view

不二如是

                               
登录/注册后可看大图

上一讲我们搞定movable-view，本次来学习cover-view。

cover-view，覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。

cover-image，覆盖在原生组件之上的图片视图。

可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

其属性：

属性名	类型	默认值	说明
src	String	图标路径，支持临时路径、网络地址（1.6.0起支持）。暂不支持base64格式。

代码要用到的素材： Archive.zip (21.73 KB, 下载次数: 5, 售价: 3 鱼币)

2018-6-14 14:09 上传

点击文件名下载附件

在项目index下，创建一个文件夹用来存放上面的照片：

index.wxml：

<video id="myVideo" src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4" controls="{{false}}" event-model="bubble">
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="./img/play.png" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="./img/pause.png" />
    </cover-view>
  </cover-view>
</video>

video元素，在线加载鱼C课程的一段BGM。

cover-view中设置了cover-image用来遮盖。

添加样式：

.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}
.play,.pause,.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}

index.js：

Page({
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
  },
  pause() {
    this.videoCtx.pause()
  }
})

示例代码使两张图片浮于video视频的上方。

---

课后作业


1、补充代码在video中实现cover-view效果：

<video id="myVideo" src="https://www.w3cschool.cn/video" controls="{{false}}" event-model="bubble">
  <？ class="play" bindtap="play"> 
    <？ class="img" src="/path/to/icon_play" /> 
  <？>
</video>

答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

一笙彤

0