This page is translated by Google Cloud Translation API

Switch to Chinese

cover-image

Image view overlaid on native component. Overridable native components are the same as cover-view, support nesting in cover-view.

Platform Difference Description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	√	√	√	√	x	√	√	x	√	√

Property description

property name	type	default value	description	platform difference description
src	String		图标路径。支持本地路径、网络路径。不支持 base64 格式。
@load	eventhandle		图片加载成功时触发	微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序
@error	eventhandle		图片加载失败时触发	微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序

Overridable native components on app-vue: <video>,<map>

Supported events: click

Unsupported CSS

• position: fixed
• opacity
• overflow
• padding
• linebreak
• white-space

Note: nvue's cover-view is not in the above restrictions, it only supports and fully supports all css of nvue.

Tips

• Nesting of other components in cover-view and cover-image on the app-side vue page, including nesting cover-view again, can only cover video, map. App-side nvue pages do not have these restrictions since 2.1.5.
• App端 cover-image 使用本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。

Example View Demo

The following sample code is from hello uni-app project, it is recommended to use HBuilderX, create a new uni-app project, and select the hello uni-app template, you can directly experience the complete Example.

Template

Script

Style

<!-- This example does not contain the complete css, please refer to the above to obtain the external chain css, and view it in the hello uni-app project -->
<template>
	<view class="page">
		<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
			<cover-view class="controls-title">简单的自定义 controls</cover-view>
			<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
			<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
		</video>
	</view>
</template>