LoadMore 加载更多

				
<template>
	<zk-theme type="page" :padding="30" >
		<!-- 加载更多状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载更多状态" align="center" />
			<zk-load-more status="loadmore" @loadmore="onLoadMore" />
		</zk-theme>

		<!-- 加载中状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载中状态" align="center" />
			<zk-load-more status="loading" />
		</zk-theme>

		<!-- 没有更多状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="没有更多状态" align="center" />
			<zk-load-more status="nomore" />
		</zk-theme>

		<!-- 实线样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="实线样式" align="center" />
			<zk-load-more status="nomore" :line="true" :dashed="false" line-color="#e5e5e5" />
		</zk-theme>

		<!-- 虚线样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="虚线样式" align="center" />
			<zk-load-more status="nomore" :line="true" :dashed="true" line-color="#e5e5e5" />
		</zk-theme>

		<!-- 自定义样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义样式" align="center" />
			<zk-load-more status="loading" :line="true" :icon-size="40" loading-icon="spinner" icon-color="#2979ff"
				color="#2979ff" />
		</zk-theme>

		<!-- 点状 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="点状样式" align="center" />
			<zk-load-more status="nomore" :is-dot="true" />
		</zk-theme>

		<!-- 列表演示 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="列表加载演示" align="center" />
			<view class="list-container">
				<view class="list-item" v-for="(item, index) in list" :key="index">
					<zk-text type="primary" :size="28" :text="`列表项 ${item}`" />
				</view>
			</view>
			<zk-load-more :status="listLoadStatus" @loadmore="loadMoreList" />
		</zk-theme>
	</zk-theme>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			page: 1,
			listLoadStatus: 'loadmore'
		}
	},

	created() {
		this.loadMoreList()
	},

	methods: {
		onLoadMore() {
			uni.showToast({
				title: '触发加载更多',
				icon: 'none'
			})
		},

		loadMoreList() {
			if (this.listLoadStatus === 'loading') return

			this.listLoadStatus = 'loading'

			setTimeout(() => {
				const newItems = Array.from({ length: 10 }, (_, i) =>
					this.list.length + i + 1
				)

				this.list.push(...newItems)
				this.page++

				if (this.page > 3) {
					this.listLoadStatus = 'nomore'
				} else {
					this.listLoadStatus = 'loadmore'
				}
			}, 1500)
		}
	}
}
</script>

<style lang="scss">
.list-container {
	/* #ifndef APP-NVUE */
	min-height: 200rpx;
	/* #endif */
}

.list-item {
	padding: 20rpx 0;
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #eee;

	&:last-child {
		border-bottom-width: 0;
	}
}

/* #ifdef APP-NVUE */
.list-container {
	width: 662rpx;
}

.list-item {
	width: 662rpx;
}
/* #endif */

/* #ifndef APP-NVUE */
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */
</style>