vue 组件库

安装

npm install dh-vue-component --registry https://npm.dhgateinternal.com

组件

ScrollLoad

滚动加载组件

<script setup lang="ts">
import { ScrollLoad } from 'dh-vue-component'
const loadData = reactive({
  count: 0,
  isEmpty: false,
  noMore: false,
  loading: false,
})

// load 函数每次加载的数量在dom的显示上最好大于1屏，否则第二次加载的时候会没有效果
const load = () => {
  loadData.loading = true
  setTimeout(() => {
    loadData.loading = false
    loadData.count += 30
    if (loadData.count == 0) {
      loadData.isEmpty = true
    }
    if (loadData.count >= 120) {
      loadData.noMore = true
    }
  }, 300)
}
</script>

<template>
  <ScrollLoad @load="load" :isEmpty="loadData.isEmpty" :noMore="loadData.noMore" :loading="loadData.loading">
    <div v-for="i in loadData.count" :key="i" class="bg-blue-2 text-blue p-2 text-center m-2 rounded-md">
      哈哈哈{{ i }}
    </div>
    <template #loading>
      <div class="text-red">加载中</div>
    </template>
    <template #empty>
      <div class="text-red text-center">无数据</div>
    </template>
  </ScrollLoad>
</template>

<style>
body {
  padding: 0;
  margin: 0;
  font-size: 16px;
  background-color: #f5f5f5;
}
</style>

属性

| 属性 | 说明 | 类型 | 默认值 | | ---------- | ------------------------ | ------- | ------ | | loading | 是否正在加载 | boolean | false | | isEmpty | 是否为空 | boolean | false | | noMore | 是否没有更多数据 | boolean | false | | showNoMore | 是否显示没有更多数据提示 | boolean | true |

事件

| 事件名 | 说明 | 参数 | | ------ | ---------------- | ---- | | load | 滚动到底部时触发 | - |

::: warning :warning: WARNING

1. load 事件在组件初始化时会自动触发一次
2. 加载一次显示的数据量最好大于一屏，否则会无法触发第二次加载

:::

插槽

| 插槽名 | 说明 | 参数 | | ------- | ---------- | ---- | | loading | 加载中 | - | | empty | 无数据 | - | | end | 没有更多了 | - |