uView Next
4.0.105

外观

Album 相册

约 1347 字大约 4 分钟

2025-10-31

本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码。

基本使用

通过 urls 设置相册的图片地址，搭配 image 等做出更棒的效果！

<template>
	<un-page>
		<view class="u-page">
			<card title="基础使用">
				<view class="album">
					<view class="album__avatar">
						<image src="/static/uview/common/logo.png" mode="" style="width: 32px; height: 32px;"></image>
					</view>
					<view class="album__content">
						<un-text text="uView UI" type="primary" bold size="17"></un-text>
						<un-text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></un-text>
						<un-album :urls="urls1" keyName="src2" singleSize="100px"></un-album>
					</view>
				</view>
			</card>
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const urls1 = ref<string[]>([
	'https://uview.d3u.cn/web/static/uview/album/1.jpg'
])
</script>

<style lang="scss" scoped>
.album {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	&__avatar {
		background-color: #f3f4f6;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1; // 占满剩余宽度
	}
}
</style>

多图模式

通过 urls 传入更多的图片地址形成图片列表：

<template>
	<un-page>
		<view class="u-page">
			<card title="多图模式">
				<view class="album">
					<view class="album__avatar">
						<image src="/static/uview/common/logo.png" mode="" style="width: 32px; height: 32px;"></image>
					</view>
					<view class="album__content">
						<un-text text="uView UI" type="primary" bold size="17"></un-text>
						<un-text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></un-text>
						<un-album :urls="urls2"></un-album>
					</view>
				</view>
			</card>
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const urls2 = ref<string[]>([
	'https://uview.d3u.cn/web/static/uview/album/1.jpg',
	'https://uview.d3u.cn/web/static/uview/album/2.jpg',
	'https://uview.d3u.cn/web/static/uview/album/3.jpg',
	'https://uview.d3u.cn/web/static/uview/album/4.jpg',
	'https://uview.d3u.cn/web/static/uview/album/5.jpg',
	'https://uview.d3u.cn/web/static/uview/album/6.jpg',
	'https://uview.d3u.cn/web/static/uview/album/7.jpg',
	'https://uview.d3u.cn/web/static/uview/album/8.jpg',
	'https://uview.d3u.cn/web/static/uview/album/9.jpg',
	'https://uview.d3u.cn/web/static/uview/album/10.jpg'
])
</script>

<style lang="scss" scoped>
.album {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	&__avatar {
		background-color: #f3f4f6;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1; // 占满剩余宽度
	}
}
</style>

图文对齐

通过 albumWidth 事件获取相册宽度，使文字宽度与相册宽度保持一致：

<template>
	<un-page>
		<view class="u-page">
			<card title="图文对齐">
				<view class="album">
					<view class="album__avatar">
						<image src="/static/uview/common/logo.png" mode="" style="width: 32px; height: 32px;"></image>
					</view>
					<view class="album__content">
						<un-text text="uView UI" type="primary" bold size="17"></un-text>
						<view :style="{
							marginBottom: '8px',
							width: albumWidth + 'px'
						}">
							<un-text text="全面的组件和便捷的工具会让您信手拈来，如鱼得水" :customStyle="{
								width: albumWidth + 'px'
							}"></un-text>
						</view>
						<un-album :urls="urls2" @albumWidth="handleAlbumWidth" multipleSize="68"></un-album>
					</view>
				</view>
			</card>
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const albumWidth = ref<number>(0)
const urls2 = ref<string[]>([
	'https://uview.d3u.cn/web/static/uview/album/1.jpg',
	'https://uview.d3u.cn/web/static/uview/album/2.jpg',
	'https://uview.d3u.cn/web/static/uview/album/3.jpg',
	'https://uview.d3u.cn/web/static/uview/album/4.jpg',
	'https://uview.d3u.cn/web/static/uview/album/5.jpg',
	'https://uview.d3u.cn/web/static/uview/album/6.jpg',
	'https://uview.d3u.cn/web/static/uview/album/7.jpg',
	'https://uview.d3u.cn/web/static/uview/album/8.jpg',
	'https://uview.d3u.cn/web/static/uview/album/9.jpg',
	'https://uview.d3u.cn/web/static/uview/album/10.jpg'
])

const handleAlbumWidth = (width: number) => {
	albumWidth.value = width
}
</script>

<style lang="scss" scoped>
.album {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	&__avatar {
		background-color: #f3f4f6;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1; // 占满剩余宽度
	}
}
</style>

更改裁剪模式

通过 multipleMode 属性设置图片的裁剪模式：

<template>
	<un-page>
		<view class="u-page">
			<card title="更改裁剪模式">
				<view class="album">
					<view class="album__avatar">
						<image src="/static/uview/common/logo.png" mode="" style="width: 32px; height: 32px;"></image>
					</view>
					<view class="album__content">
						<un-text text="uView UI" type="primary" bold size="17"></un-text>
						<un-text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></un-text>
						<un-album :urls="urls3" rowCount="2" maxCount="4" multipleMode="scaleToFill"></un-album>
					</view>
				</view>
			</card>
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const urls3 = ref<string[]>([
	'https://uview.d3u.cn/web/static/uview/album/5.jpg',
	'https://uview.d3u.cn/web/static/uview/album/6.jpg',
	'https://uview.d3u.cn/web/static/uview/album/7.jpg',
	'https://uview.d3u.cn/web/static/uview/album/8.jpg'
])
</script>

<style lang="scss" scoped>
.album {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	&__avatar {
		background-color: #f3f4f6;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1; // 占满剩余宽度
	}
}
</style>

更改图片大小

通过 multipleSize 属性设置图片的尺寸：

<template>
	<un-page>
		<view class="u-page">
			<card title="更改图片大小">
				<view class="album">
					<view class="album__avatar">
						<image src="/static/uview/common/logo.png" mode="" style="width: 32px; height: 32px;"></image>
					</view>
					<view class="album__content">
						<un-text text="uView UI" type="primary" bold size="17"></un-text>
						<un-text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></un-text>
						<un-album :urls="urls4" rowCount="2" maxCount="4" multipleSize="50"></un-album>
					</view>
				</view>
			</card>
		</view>
	</un-page>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const urls4 = ref<string[]>([
	'https://uview.d3u.cn/web/static/uview/album/7.jpg',
	'https://uview.d3u.cn/web/static/uview/album/8.jpg',
	'https://uview.d3u.cn/web/static/uview/album/9.jpg',
	'https://uview.d3u.cn/web/static/uview/album/10.jpg'
])
</script>

<style lang="scss" scoped>
.album {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	&__avatar {
		background-color: #f3f4f6;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1; // 占满剩余宽度
	}
}
</style>

API

Props

参数说明类型默认值
urls图片地址列表Array-
singleSize单图时，图片长边的长度String | Number180
multipleSize多图时，图片边长String | Number70
space多图时，图片水平和垂直之间的间隔String | Number6
singleMode单图时，图片缩放裁剪的模式
Enum
scaleToFill
multipleMode多图时，图片缩放裁剪的模式
Enum
aspectFill
maxCount最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量String | Number9
previewFullImage是否可以预览图片Booleantrue
rowCount每行展示图片数量，如设置，singleSize 和 multipleSize 将会无效String | Number3
showMore超出 maxCount 时是否显示查看更多的提示Booleantrue
keyName当 urls 为对象数组时，对象中的图片地址属性名String-

Events

事件名说明回调参数
albumWidth某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送width

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名默认值说明
$un-album-more-bg-colorrgba(0, 0, 0, 0.3)查看更多提示的背景色
$un-album-more-font-size$text-base查看更多提示的字体大小
$un-album-more-line-height22px查看更多提示的行高
$un-album-more-color$text-color-inverted查看更多提示的文字颜色

Copyright © 2026 uView Next