微信小程序（黑马）|【uniapp小程序】覆盖图片容器cover-image uni-app|微信小程序|小程序

写在前面：

观众老爷们好呀，这里是前端小刘不怕牛牛频道，小程序系列文章又更新了呀。

上文我们补充了一点微信小程序的知识，那么今天我们就来学习一下，uniapp框架的实用组件——覆盖图片容器cover-image

文章图片

文章目录

一，基础知识

cover-image组件和之前提到的cover-view组件一样，都具有覆盖在原生组件之上的功能，前者可以称为图片视图。

首先，我们需要知道，小程序的渲染模式是从上往下的，也就有了层级之分
覆盖其实就是在设计的时候，程序员为了实现某个元素可以直接放某些原生组件的上层，定义了这个有cover功能的组件
可覆盖的原生组件与cover-view组件一样，有map、video、textarea、canvas
【微信小程序（黑马）|【uniapp小程序】覆盖图片容器cover-image】cover-image组件可以嵌套在cover-view组件中，一般会用在某个需要覆盖在上层的自定义组件上
属性
1. src，用来设置图片的路径，支持本地路径和网络路径，不支持base64格式
  这个基本跟image组件差不多，正常设置就行
2. @load，值为事件句柄，在图片加载完毕后调用
3. @error，值为事件句柄，在图片加载失败时调用
支持的事件是click
不支持的CSS样式属性有：position:fixed、opacity、overflow、padding、line-break、white-space

二，注意点

App端vue页面的 cover-view、cover-image 组件中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。换句话说，禁止多次套娃！
不过App端nvue页面自2.1.5起就没有这些限制
App端 cover-image 使用本地图像的话，打包前需要设置资源为释放模式，也就是在manifest文件内app-plus新增runmode节点，设置值为liberate。
App端还可以使用plus.nativeObj.view绘制原生内容
App端还提供了更灵活和强大的subNvue，参考原生子窗体subNvue
在 video 组件中使用时，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue页面可实现。
在App端，如果重度使用video和map，推荐使用nvue页面。
百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view。
支付宝小程序中 cover-view 不支持嵌套。