037 ∞ 视图容器：cover-view
本帖最后由 不二如是 于 2018-6-14 14:25 编辑http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png
上一讲我们搞定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格式。
代码要用到的素材：
在项目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>
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 0
页:
[1]