简体中文
覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view
,支持嵌套在cover-view
里。
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 抖音小程序、飞书小程序 | QQ小程序 | 快应用 | 360小程序 | 快手小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | x | √ | √ | x | √ | √ |
HarmonyOS Next 兼容性
HarmonyOS Next |
---|
HBuilderX 4.28 |
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
src | String | 图标路径。支持本地路径、网络路径。不支持 base64 格式。 | ||
@load | eventhandle | 图片加载成功时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 | |
@error | eventhandle | 图片加载失败时触发 | 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序 |
app-vue上可覆盖的原生组件:<video>
、<map>
支持的事件:click
不支持的 CSS
注意:nvue的cover-view不在上述限制中,它仅支持且全部支持nvue的所有css。
Tips
cover-view
、cover-image
中不支持嵌套其它组件,包括再次嵌套cover-view
,仅可覆盖video
、map
。App端nvue页面自2.1.5起没有这些限制。cover-image
使用本地图像的话,打包前需要设置资源为释放模式,在manifest文件内app-plus新增runmode节点,设置值为liberate。示例 查看演示
以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
Template
Script
Style
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<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>