LocalLivingServicesUniapp/components/list-scroll-view/list-expand.vue

<template>
	<view class="expandable-list-container">
		<!-- 使用作用域插槽，将item数据传回给父组件 -->
		<slot :record="data" :items="visibleItems"></slot>

		<!-- 当项目总数大于限制时，显示展开/收起按钮 -->
		<view v-if="items.length > limit" class="expand-trigger" @click.stop="toggleExpand">
			<text>{{ isExpanded ? '收起' : '展开查看' }}</text>
			<!-- <u-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#909399" size="12"></u-icon> -->
			<image :src="`/static/order/${isExpanded ? 'hidden' : 'show'}.png`"></image>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ExpandableList',
	props: {
		// 兼容小程序，slot内如果使用到父级变量（此变量正好是遍历出来的），会取不到值
		data: {
			type: Object,
			default: () => ({})
		},
		// 接收完整的列表数据
		items: {
			type: Array,
			default: () => []
		},
		// 默认显示的条目数量
		limit: {
			type: Number,
			default: 2
		}
	},
	data() {
		return {
			isExpanded: false // 内部维护的展开状态
		};
	},
	computed: {
		// 根据展开状态，计算出实际应该显示的列表
		visibleItems() {
			if (this.isExpanded) {
				return this.items; // 展开时，返回所有项目
			}
			return this.items.slice(0, this.limit); // 折叠时，返回限制数量的项目
		}
	},
	methods: {
		// 切换展开/收起状态
		toggleExpand() {
			this.isExpanded = !this.isExpanded;
		}
	}
};
</script>

<style lang="scss" scoped>
.expand-trigger {
	font-size: 24rpx;
	color: #2D88F4;
	padding: 16rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text {
		margin-right: 8rpx;
	}

	image {
		width: 20rpx;
		height: 20rpx;
	}
}
</style>