Pure Ui 文档
搜索文档 K

Appearance

列表 ​

列表组件。
此组件只是组合了空状态和加载更多组件，用于展示列表数据以及列表状态。

基础使用 ​

通过默认插槽展示列表数据。

vue
<template>
	<pure-list>
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

空状态 ​

将 status 属性设置为 empty 开启空状态。

vue
<template>
	<pure-list :status="status">
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 数据状态
	const status = ref("empty");

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

加载更多 ​

将 status 属性设置为 more 开启加载更多状态。

vue
<template>
	<pure-list :status="status">
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 数据状态
	const status = ref("more");

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

加载中 ​

将 status 属性设置为 loading 开启加载中状态。

vue
<template>
	<pure-list :status="status">
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 数据状态
	const status = ref("loading");

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

加载全部 ​

将 status 属性设置为 nomore 开启加载全部状态。

vue
<template>
	<pure-list :status="status">
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 数据状态
	const status = ref("nomore");

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

加载失败 ​

将 status 属性设置为 fail 开启加载失败状态。

vue
<template>
	<pure-list :status="status">
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 数据状态
	const status = ref("fail");

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

列数 ​

通过 cols 属性设置列数。

vue
<template>
	<pure-list cols="3">
		<view
			class="item"
			v-for="item in list"
			:key="item.title"
		>
			<pure-image :src="item.image"></pure-image>
			<view class="item__title">{{ item.title }}</view>
		</view>
	</pure-list>
</template>

<script setup>
	import { ref } from "vue";

	// 数据状态
	const status = ref("more");

	// 列表数据
	const list = ref([
		{ title: "君不见黄河之水天上来", image: "/static/images/elephant.jpg" },
		{ title: "奔流到海不复回", image: "/static/images/elephant.jpg" },
		{ title: "君不见高堂明镜悲白发", image: "/static/images/elephant.jpg" },
		{ title: "朝如青丝暮成雪", image: "/static/images/elephant.jpg" },
		{ title: "人生得意须尽欢", image: "/static/images/elephant.jpg" },
		{ title: "莫使金樽空对月", image: "/static/images/elephant.jpg" }
	]);
</script>

属性 ​

名称类型默认值说明
cols[Number, String]2列数
gapString10px行列间距
statusStringmore状态，可选值 more、loading、nomore、fail
emptyOptsObject空状态设置项 参考
loadmoreOptsObject加载更多状态设置项 参考

插槽 ​

名称参数说明
#empty空状态
#empty-default空状态默认插槽
#default默认，列表内容
#loadmore加载更多

样式变量 ​

名称说明
--pure-list-empty-padding空状态内边距
--pure-list-empty-margin空状态外边距
--pure-list-empty-font-size空状态字体大小
--pure-list-empty-font-weight空状态字体粗细
--pure-list-empty-color空状态字体颜色
--pure-list-empty-background空状态背景颜色
--pure-list-empty-border-radius空状态圆角大小
--pure-list-columns列数
--pure-list-gap行列间距
--pure-list-footer-padding底部内边距
--pure-list-footer-margin底部外边距
--pure-list-footer-font-size底部字体大小
--pure-list-footer-font-weight底部字体粗细
--pure-list-footer-color底部字体颜色

Pure Ui 文档

Copyright © 2025 济南晨霜信息技术有限公司