简述uniapp的image标签的mode属性

uni-app的image标签是用于显示图片的组件,而mode属性则用于设置图片的显示模式,这个也是传统 web 开发中的 标签中没有的

mode属性有以下几种取值:

  1. aspectFit:按照原始比例缩放图片,使图片的长边能完全显示在容器内,可能会露出空白区域。
  2. aspectFill:按照原始比例缩放图片,使图片的短边能完全填充容器,可能会裁剪掉部分图片。
  3. widthFix:宽度不变,高度自动变化,保持原始宽高比。
  4. heightFix:高度不变,宽度自动变化,保持原始宽高比。
  5. scaleToFill:拉伸图片以填满容器,不保持原始宽高比,可能导致图片变形。
  6. fitCenter:先按照aspectFit的方式进行缩放,之后居中显示图片,可能会露出空白区域。
  7. top:将图片的顶部对齐到容器的顶部。
  8. bottom:将图片的底部对齐到容器的底部。
  9. left:将图片的左边对齐到容器的左边。
  10. right:将图片的右边对齐到容器的右边。
  11. topLeft:将图片的左上角对齐到容器的左上角。
  12. topRight:将图片的右上角对齐到容器的右上角。
  13. bottomLeft:将图片的左下角对齐到容器的左下角。
  14. bottomRight:将图片的右下角对齐到容器的右下角。
  • Uniapp 的 与传统 web 开发中的 相比多了一个 mode 属性,用来设置图片的裁剪、缩放模式。

  • 在开发中尽量养成每一个 都设置 mode 的习惯。可以规避掉很多 UI 显示异常的问题

  • 一般只需要使用 widthFixaspectFill 这两个属性即可应对绝大多数情况。

    即只需设置宽度自动撑起高度的图片用 widthFix ;需要固定尺寸设置宽高,并保持图片不被拉伸的图片用 aspectFill

    例如:所有 icon、文章详情里、产品详情里的详情图一般会用 widthFix,用户头像、缩略图一般会用 aspectFill

lazy-load
  • 图片懒加载,小程序支持,只针对 page 与 scroll-view 下的 image 有效。

通过设置mode属性,可以根据需求选择合适的图片显示效果。

你可能感兴趣的:(uni-app)