ThorUI文档

# tui-image-group 图片组合

介绍

Image Group图片组合，可设置图片宽高，圆角，偏移距离等，可设置排列方向。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiImageGroup from "@/components/thorui/tui-image-group/tui-image-group.vue"
export default {
	components:{
		tuiImageGroup
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-image-group": "/components/thorui/tui-image-group/tui-image-group"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

单图展示

通过 imageList 属性设置图片地址，radius 属性设置图片圆角。

<!--uni-app-->
<tui-image-group :imageList="imageList" radius="0"></tui-image-group>
<tui-image-group :imageList="imageList" radius="20rpx"></tui-image-group>

<!--微信小程序-->
<tui-image-group imageList="{{imageList}}" radius="0"></tui-image-group>
<tui-image-group imageList="{{imageList}}" radius="20rpx"></tui-image-group>

//data数据
imageList:[{
	id:1,
	src:"/static/images/product/2.jpg"
}]
组合图，排列方向 row

通过 isGroup 属性设置是否为组合图展示，width 属性设置图片宽度，height 属性设置图片宽度。

组合图默认排列方向为row 水平排列，可通过 direction 属性设置为column，即纵向排列。

<!--uni-app-->
<tui-image-group :imageList="imageList" isGroup width="60rpx" height="60rpx"></tui-image-group>

<!--微信小程序-->
<tui-image-group imageList="{{imageList}}" isGroup width="60rpx" height="60rpx"></tui-image-group>

//data数据
imageList:[{
	id:1,
	src:"/static/images/product/1.jpg"
},{
	id:2,
	src:"/static/images/product/2.jpg"
},{
	id:3,
	src:"/static/images/product/3.jpg"
},{
	id:4,
	src:"/static/images/product/4.jpg"
}]

# Slots

名称 说明
default 标签内显示内容，可忽略

# Props

参数 类型 说明 默认值
imageList Array 图片路径，格式：[{id:1,src:"1.png"}] [ ]
width String 图片宽度 120rpx
height String 图片高度 120rpx
borderWidth String 图片边框宽度 rpx 0
borderColor String 图片边框颜色 可传rgba #fff
radius String 图片圆角 50%
mode String 图片裁剪、缩放的模式 scaleToFill
lazyLoad Boolean 图片懒加载。只针对page与scroll-view下的image有效 true
fadeShow Boolean 图片显示动画效果 仅App-nvue 2.3.4+ Android有效
webp Boolean 默认不解析 webP 格式，只支持网络资源 微信小程序2.9.0
longpress Boolean 开启长按图片显示识别小程序码菜单 微信小程序2.7.0
isGroup Boolean 是否组合排列 false
direction String 排列方向 row ，column row
distance [Number, String] 偏移距离 rpx -16
multiLine Boolean 是否可多行展示，排列方向=row时生效，distance需设置为大于0的数 false

# Events

事件名 说明 回调参数
errorEvent 图片加载出错 错误信息 e
loaded 图片加载完成 完成信息 e
click 图片点击事件 {
  index : 图片索引,
  id : id值，父组件传入
}

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-color-analysis 颜色分析器 →