cover-image与image区别解析
文章目录
- 一、属性
- 二、Tips
- 区别
一、属性
- 覆盖在原生组件上的图片视图。
- 可覆盖的原生组件同
cover-view，支持嵌套在cover-view里 - src，支持图标路径。支持本地路径、网络路径。不支持 base64 格式。
- 这个基本跟image组件差不多，正常设置就行
- @load，图片加载成功时触发
- @error，图片加载失败时触发
- 支持的事件是click
- 不支持的CSS有：position:fixed、opacity、overflow、padding、line-break、white-space
二、Tips
- 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绘制原生内容，参考:uni-app中使用5+界面控件 (opens new window)、plus.nativeObj.view规范(opens new window)
- App端还提供了更灵活和强大的
subNvue，参考原生子窗体subNvue - 在 video 组件中使用时，若想在全屏模式下使用
cover-view，只有在微信小程序、App端的nvue页面可实现。 - 在App端，如果重度使用video和map，推荐使用nvue页面。
- 百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view。
- 支付宝小程序中
cover-view不支持嵌套。
区别
一般情况下 使用image标签，如果想让你的图片不缩放，保持原图大小，使用cover-image。
两者模拟器中看不出区别，但是真机上就会有问题
cover-image中的图片会悬浮于顶层，当自己做一个弹出框时，其中的图片会显示在最上层，设置无效
image可以通过设置 z-index: -1 使图片置于底层，具体效果如下
这个是用cover-image的效果
这个是用image的效果，并设置 z-index: -1文章来源：https://www.toymoban.com/news/detail-493718.html
文章来源地址https://www.toymoban.com/news/detail-493718.html
到了这里，关于【uniapp小程序】视图容器cover-image的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[微信小程序] movable-view 可移动视图容器 - 范围问题](https://imgs.yssmx.com/Uploads/2024/02/561291-1.gif)
