• cover-view
  • cover-image
    • Bug & Tips

    cover-view

    覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。

    属性名类型默认值说明
    scroll-topNumber / String设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效
    aria-roleString无障碍访问，（角色）标识元素的作用
    aria-labelString无障碍访问，（属性）元素的额外描述

    cover-image

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

    属性名类型默认值说明
    srcString图标路径，支持临时路径、网络地址、云文件ID。暂不支持base64格式。
    bindloadEventHandle图片加载成功时触发
    binderrorEventHandle图片加载失败时触发
    aria-roleString无障碍访问，（角色）标识元素的作用
    aria-labelString无障碍访问，（属性）元素的额外描述
    Bug & Tips
    • tip: <cover-view>和<cover-image>的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击
    • tip: 事件模型遵循冒泡模型，但不会冒泡到原生组件。
    • tip: 文本建议都套上cover-view标签，避免排版错误。
    • tip: 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
    • tip: 建议子节点不要溢出父节点
    • tip: 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
    • bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 qq:if 控制显隐，否则会导致 cover-view 不显示
    1. <video
    2.   id="myVideo"
    3.   src="https://qzonestyle.gtimg.cn/qzone/qzact/act/external/qq-video/qq-video.mp4"
    4.   controls="{{false}}"
    5.   event-model="bubble"
    6. >
    7.   <cover-view class="controls">
    8.     <cover-view class="play" bindtap="play">
    9.       <cover-image class="img" src="/path/to/icon_play" />
    10.     </cover-view>
    11.     <cover-view class="pause" bindtap="pause">
    12.       <cover-image class="img" src="/path/to/icon_pause" />
    13.     </cover-view>
    14.     <cover-view class="time">00:00</cover-view>
    15.   </cover-view>
    16. </video>
    1. .controls {
    2.   position: relative;
    3.   top: 50%;
    4.   height: 50px;
    5.   margin-top: -25px;
    6.   display: flex;
    7. }
    8. .play,
    9. .pause,
    10. .time {
    11.   flex: 1;
    12.   height: 100%;
    13. }
    14. .time {
    15.   text-align: center;
    16.   background-color: rgba(0, 0, 0, 0.5);
    17.   color: white;
    18.   line-height: 50px;
    19. }
    20. .img {
    21.   width: 40px;
    22.   height: 40px;
    23.   margin: 5px auto;
    24. }
    1. Page({
    2.   onReady() {
    3.     this.videoCtx = qq.createVideoContext('myVideo')
    4.   },
    5.   play() {
    6.     this.videoCtx.play()
    7.   },
    8.   pause() {
    9.     this.videoCtx.pause()
    10.   }
    11. })