<template>
  <div class="kole-infinitescroll kole-infinitescroll-scroll" :style="{ height: props.height }" role="feed"><div class="kole-infinitescroll-scroll-item">活动记录 1</div><div class="kole-infinitescroll-scroll-item">活动记录 2</div><button class="kole-infinitescroll-button" type="button" :disabled="props.loading || props.status === 'done'" @click="emit('load')">{{ props.loading ? '加载中…' : props.status === 'done' ? '已全部加载' : '加载更多' }}</button></div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    items: { type: Array, default: () => [] }, // 数据项
    loading: { type: Boolean, default: false }, // 是否加载中
    status: { type: String, default: 'more' }, // 状态
    height: { type: String, default: '180px' }, // 高度
});
const emit = defineEmits(["load"]);


</script>

<style src="./InfiniteScroll.css"></style>
