dh-vue-component

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

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

:::

插槽

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