更新记录
1.1.0(2021-01-21)
修复mode设置不生效问题
1.0.0(2021-01-21)
首次发布
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
2.7.14 |
uni-app
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | |||
mode | |||
lazy-load | |||
fade-show | |||
webp | |||
show-menu-by-longpress | |||
@error | |||
@load |
以上属性与官方Image一致,请参考 官方文档
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
loading-error-img | String | ./loading_error.png | 可选: 加载失败图片:可以本地url、网络url、base64 (与src一致) |
loading-ing-img | String | oblique-light | 可选: 加载中的样式或图片 two-balls = 两个球来回转 oblique-light = 斜光 looming = 若影若现 本地url、网络url、base64 = 自定义的加载中图片(与src一致) |
complete-transition | Boolean | true | 可选:是否需要显示加载完成动画 |
以上为增强属性,为本组件的增加功能
使用示例
总的使用原则就是,官方的Image组件的属性都可以使用,还可以使用增强属性,占位、失败、加载完成动画的显示
图片大小就直接 class 设置就行了,和官方的Image组件一样
<template>
<view class="list">
<fr-image class="img" src="../../static/a.png" mode=""/>
<fr-image class="img" src="https://tva1.sinaimg.cn/xxx.png" mode="" loading-ing-img="two-balls"/>
<fr-image class="img" src="../a.png" mode="" loading-ing-img="../static/a.png"/>
<fr-image class="img" src="../static/a.png" mode="" loading-ing-img="../static/a.png"/>
</view>
</template>
<script>
import FrImage from '@/components/fr-image/fr-image.vue'
</script>
加入交流群
扫码加我微信加入微信交流群(请备注:图片Uni插件)
![图片名称](http://ossdafuhao.oss-cn-shanghai.aliyuncs.com/ZM%2F68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323032302f372f31382f313733363137376531343063626165383f773d32303026683d32303126663d6a70656726733d3639343530.jpg)