更新记录
1.0.8(2023-02-22) 下载此版本
修复问题
1.0.7(2023-02-22) 下载此版本
修复问题
1.0.6(2023-02-22) 下载此版本
修复问题
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | - | √ | √ | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
使用说明
组件参数
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| rate | Number | String | 0.7 | 异常状态的文字显示比例,0.5为图片宽度的50% |
| radis | String | 图片圆角,等同于borderRadis | ||
| src | String | 图片地址,等同于image组件的src | ||
| mode | String | 图片模式,等同于image组件的mode | ||
| preview | Boolean | false | 点击图片是否能预览 | |
| previewList | Array |
[src] | 图片预览列表,等同于uni.previewImage的urls属性 | |
| previewIndex | Number | 0 | 图片预览初始下标,等同于uni.previewImage的current属性 | |
| animation | Boolean | true | 是否启用loading效果 | |
| width | String | 100% | 图片宽度,等同于css的width | |
| height | String | 图片高度,等同于css的height | ||
| lazyLoad | Boolean | true | 图片懒加载,等同于image的lazyLoad | |
| bg | String | #f5f5f5 | 图片背景色 | |
| boxHidden | Boolean | true | 组件overflow模式,true为hidden,false为visible |
快速上手
插件使用方式十分简单 只需要将image组件替换为该组件即可 例如:
//原图片
<image src="xxx.jpg" mode="widthFix" class="abc"></image>
// 使用组件
<daxiang-img src="xxx.jpg" mode="widthFix" class="abc"></daxiang-img>
扩展功能示例
图片点击预览
场景示例:Banner轮播图需要预览功能
<swiper>
<swiper-item v-for="(item,index) in bannerList" :key="index">
<daxiang-img :src="item.url" mode="aspectFill" preview :previewList="bannerList.map(v=>v.url)" :previewIndex="index"></daxiang-img>
</swiper-item>
</swiper>

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 166
赞赏 0
下载 10944359
赞赏 1800
赞赏
京公网安备:11010802035340号