跳到主要内容
版本：4.x

CoverView

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

支持情况：

参考文档

类型​

ComponentType<CoverViewProps>

示例代码​

// js
class App extends Components {
  render () {
    return (
      <View className='container'>
        <Video id='myVideo' src='src'>
          <CoverView className='controls'>
            <CoverView className='play' onClick='play'>
              <CoverImage className='img' src='src' />
            </CoverView>
          </CoverView>
        </Video>
      </View>
    )
  }
}
// css
.container {
  position: relative;
}
.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 225px;
  transform: translate(-50%, -50%);
}

CoverViewProps​

参数类型默认值必填说明
scrollTopnumber否设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效
fixedTopstring否设置与容器顶部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 top 值，该属性优先级高于 fixed-bottom，CSS 设置的 position、top、bottom 值
fixedRightstring否设置与容器右侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 right 值，该属性优先级高于 CSS 设置的 position、left、right 值
fixedBottomstring否设置与容器底部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 bottom 值，该属性优先级高于 CSS 设置的 position、top、bottom 值
fixedLeftstring否设置与容器左侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 left 值，该属性优先级高于 fixed-right，CSS 设置的 position、left、right 值
ariaRolestring否无障碍访问，（角色）标识元素的作用
ariaLabelstring否无障碍访问，（属性）元素的额外描述
scrollXbooleanfalse否允许横向滚动。
scrollYbooleanfalse否允许纵向滚动。
upperThresholdnumber50否距顶部/左边多远时（单位px），触发 scrolltoupper 事件。
lowerThresholdnumber50否距底部/右边多远时（单位px），触发 scrolltolower 事件。
scrollLeftnumber否设置横向滚动条位置。
scrollIntoViewstring否滚动到子元素，值应为某子元素的 id。当滚动到该元素时，元素顶部对齐滚动区域顶部。
说明：scroll-into-view 的优先级高于 scroll-top。
scrollWithAnimationbooleanfalse否在设置滚动条位置时使用动画过渡。
scrollAnimationDurationnumber否当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
enableBackToTopbooleanfalse否当点击 iOS 顶部状态栏或者双击 Android 标题栏时，滚动条返回顶部，只支持竖向。
trapScrollbooleanfalse否纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
disableLowerScrollstring否发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
disableUpperScrollstring否发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
onScrollToUpperCommonEventFunction否滚动到顶部/左边，会触发 scrolltoupper 事件。
onScrollToLowerCommonEventFunction否滚动到底部/右边，会触发 scrolltolower事件。
onScrollCommonEventFunction否滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}。
onTouchStartCommonEventFunction否触摸动作开始。
onTouchMoveCommonEventFunction否触摸后移动。
onTouchEndCommonEventFunction否触摸动作结束。
onTouchCancelCommonEventFunction否触摸动作被打断，如来电提醒、弹窗。

API 支持度​

API微信小程序百度小程序支付宝小程序QQ 小程序京东小程序H5React NativeHarmony
CoverViewProps.scrollTop✔️✔️✔️✔️✔️
CoverViewProps.fixedTop✔️
CoverViewProps.fixedRight✔️
CoverViewProps.fixedBottom✔️
CoverViewProps.fixedLeft✔️
CoverViewProps.ariaRole✔️
CoverViewProps.ariaLabel✔️
CoverViewProps.scrollX✔️
CoverViewProps.scrollY✔️
CoverViewProps.upperThreshold✔️
CoverViewProps.lowerThreshold✔️
CoverViewProps.scrollLeft✔️
CoverViewProps.scrollIntoView✔️
CoverViewProps.scrollWithAnimation✔️
CoverViewProps.scrollAnimationDuration✔️
CoverViewProps.enableBackToTop✔️
CoverViewProps.trapScroll✔️
CoverViewProps.disableLowerScroll✔️
CoverViewProps.disableUpperScroll✔️
CoverViewProps.onScrollToUpper✔️
CoverViewProps.onScrollToLower✔️
CoverViewProps.onScroll✔️
CoverViewProps.onTouchStart✔️
CoverViewProps.onTouchMove✔️
CoverViewProps.onTouchEnd✔️
CoverViewProps.onTouchCancel✔️