cover-image

解释： 覆盖在原生组件之上的图片视图，可覆盖的原生组件同 cover-view ，支持嵌套在 cover-view 里。

属性说明：

属性名类型默认值说明
srcString图标路径，支持临时路径、网络地址。暂不支持 base64 格式。
bindloadEventHandle-图片加载成功时触发
binderrorEventHandle-图片加载失败时触发

说明：1、支持 css transition 动画，transition-property 只支持 transform (translateX, translateY) 与 opacity；2、文本建议都套上 cover-view 标签，避免排版错误；3、只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible 等；4、建议子节点不要溢出父节点；5、默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block ；6、建议不要频繁改变 s-if 表达式的值控制显隐，否则会导致 cover-view 显示异常；7、IOS端暂不支持一个页面有多个video时嵌套cover-view；8、cover-view 和 cover-image 从基础库版本1.12.0开始支持事件捕获、冒泡。

示例：

  1. <video id="myVideo"
        src="https://vd3.bdstatic.com/mda-ia8e6q3g23py8qdh/hd/mda-ia8e6q3g23py8qdh.mp4?playlist=%5B%22hd%22%5D&auth_key=1521549485-0-0-d5d042ba3555b2d23909d16a82916ebc&bcevod_channel=searchbox_feed&pd=share"
        controls>
        <cover-view class="controls">
            <cover-image class="play"
                bindtap="play"
                src="https://smartprogram.baidu.com/docs/img/logo.png">
            </cover-image>
            <cover-view class="pause" bindtap="pause">暂停</cover-view>
            <cover-view class="time">00:00</cover-view>
        </cover-view>
    </video>

  1. .controls {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 50px;
        display: flex;
    }
    .play, .pause, .time {
        flex: 1;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }
    .pause, .time {
        text-align: center;
        color: white;
        line-height: 50px;
    }
    cover-image {
        width: 100%;
        height: 100%;
    }

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

原生组件说明基础内容