tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
497
2.1m

图集 xImageGroup ​

预览

介绍 ​

主要是为了一些需要快速图片排版集的展示，比如评论图集，详情列表图集等，快速开发时使用。方便快捷。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-image-group/x-image-group.uvue

使用 ​

ts

<x-image-group></x-image-group>

Props 属性 ​

名称说明类型默认值
list图片列表
只要包含有url字段即可。
label需要在图片显示的文本字段，如果没有不要出现此字段
如果提供了temp缩略图，会优先展示temp字段，预览时采用url原图
{url:string,label?:string,temp?:string}
Array():UTSJSONObject[] => [] as UTSJSONObject[]
model显示的模式见：https://doc.dcloud.net.cn/uni-app-x/component/image.html
string"scaleToFill"
height图片高,不要使用auto，%，
string"100"
width图片宽,不要使用auto，可以%值
string"33.33%"
gutter间隙
string"2"
labelModelinset表示文本在图片上
ouuter表示文本在正文展示
不要动态修改
union"inset"
labelFontSize如果有文字显示文字的大小
string"14"
labelFontColor如果有文字，显示文字的颜色
string"white"
darkLabelFontColor如果有文字，显示文字的颜色，暗黑时为空时取白
string""
preview是否预览图片
booleantrue
round圆角
string"0"
maxCount最大显示数量,-1不限制全部展示
number-1

Events 事件 ​

名称参数说明
clickitem: mixed图片项目被点击

Slots 插槽 ​

名称说明数据
default当前设置了maxCount限制显示数量时，且list数量大于maxCount会显示更多数量，如果要自定义，请通过插槽改成你的布局。-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/image-group

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">图集 xImageGroup</x-text>
		<x-text color="#999999" class="mb-12">主要是为了一些需要快速图片排版集的展示，比如评论图集，详情列表图集等，快速开发时使用。方便快捷</x-text>
		<x-image-group round="6" :preview="false" :list="list" @click="openPreview(list, $event as UTSJSONObject)"></x-image-group>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">宽允许百分比，方便响应式</x-text>
		<x-image-group round="6" :preview="false" width="50%" :list="list3"
			@click="openPreview(list3, $event as UTSJSONObject)"></x-image-group>
	</x-sheet>
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">允许显示label在图片上</x-text>
		<x-image-group round="6" :preview="false" :list="list2" @click="openPreview(list2, $event as UTSJSONObject)"></x-image-group>
	</x-sheet>
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">label在图片下上</x-text>
		<x-image-group height="140" labelModel="outter" label-font-color="#333" dark-label-font-color="#afafaf"
			:list="list2" :preview="false" @click="openPreview(list2, $event as UTSJSONObject)"></x-image-group>
	</x-sheet>
</template>

<script setup lang="ts">
	import { previewMedia } from "@/uni_modules/x-previewMedia-s"
	import type { XPreviewMediaSource, XPreviewMediaOptions } from "@/uni_modules/x-previewMedia-s"

	type ImgItem = {
		url : string,
		label ?: string
	}

	/** 点击图集里的图片，用 x-previewMedia-s 插件打开全屏预览，定位到被点击的那张 */
	function openPreview(list : ImgItem[], item : UTSJSONObject) {
		const url = item.getString("url") ?? ""
		const sources = [] as XPreviewMediaSource[]
		let current = 0
		list.forEach((el : ImgItem, index : number) : void => {
			sources.push({ url: el.url } as XPreviewMediaSource)
			if (el.url == url) current = index
		})
		previewMedia({
			sources: sources,
			current: current,
			indicator: "number",
			loop: true,
		} as XPreviewMediaOptions)
	}

	const list = [
		{ url: 'https://picsum.photos/id/15/400/300' },
		{ url: 'https://picsum.photos/id/25/400/300' },
		{ url: 'https://picsum.photos/id/35/400/300' },
		{ url: 'https://picsum.photos/id/45/400/300' },
	]
	const list2 = [
		{ url: 'https://picsum.photos/id/100/400/300', label: "原生开发通常指的是为特定平台（如iOS或Android）使用该平台" },
		{ url: 'https://picsum.photos/id/160/400/300', label: "使用该平台" },
		{ url: 'https://picsum.photos/id/180/400/300', label: "通常指的是为特定平" },
		{ url: 'https://picsum.photos/id/200/400/300', label: "该平" },
	]
	const list3 = [
		{ url: 'https://picsum.photos/id/55/400/300' },
		{ url: 'https://picsum.photos/id/65/400/300' },
		{ url: 'https://picsum.photos/id/75/400/300' },
		{ url: 'https://picsum.photos/id/85/400/300' },
	]
</script>

<style lang="scss">

</style>
最近更新