Skip to main content
Version: 3.x

CoverView

Text view above native components. Native components that can be covered include map, video, canvas, camera, live-player, and live-pusher. Only cover-view and cover-image can be nested, and button can be used in cover-view.

Reference

Type

ComponentType<CoverViewProps>

Examples

// 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

PropertyTypeRequiredDescription
scrollTopnumberNoSets the top offset of the scroll bar. It takes effect only when overflow-y: scroll is set to become a scrolling element.

Property Support

PropertyWeChat Mini-ProgramH5React Native
CoverViewProps.scrollTop✔️

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramH5React Native
CoverView✔️✔️✔️