【uniapp小程序】覆盖图片容器cover-image

🎁写在前面：

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

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

一，基础知识

• cover-image组件和之前提到的cover-view组件一样，都具有覆盖在原生组件之上的功能，前者可以称为图片视图。
  
  首先，我们需要知道，小程序的渲染模式是从上往下的，也就有了层级之分
  覆盖其实就是在设计的时候，程序员为了实现某个元素可以直接放某些原生组件的上层，定义了这个有cover功能的组件

• 可覆盖的原生组件与cover-view组件一样，有map、video、textarea、canvas

• 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 不支持嵌套。