ZInfiniteScroll 无限滚动

滚动至底部时，加载更多数据。

😅 数据太多时会出现卡顿，等找到合适的方法后在对它优化，目前仅适用于充当个分页器之类的~

基础用法

要实现滚动加载的效果，需绑定 change 事件用于接收loadMore，且需设置 height 属性。

• 1
• 2
• 3
• 4
• 5
• 6

<template>
  <z-infinite-scroll height="300px" @change="loadMore">
    <ul class="ul-box">
      <li v-for="item in step" :key="item">{{item}}</li>
    </ul>
  </z-infinite-scroll>
</template>

<script setup lang="ts">
import { ref } from "vue";

const step = ref(6);
const loadMore = () => {
  step.value += 5;
};
</script>

<style scoped>
.ul-box {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
}

.ul-box li {
  background: #ecf5ff;
  padding: 8px 0px;
  text-align: center;
}
</style>

隐藏滚动条

添加属性 showScrollbar 隐藏滚动条。

• 1
• 2
• 3
• 4
• 5
• 6

<template>
  <z-infinite-scroll height="300px" @change="loadMore" :show-scrollbar="false">
    <ul class="ul-box">
      <li v-for="item in step" :key="item">{{item}}</li>
    </ul>
  </z-infinite-scroll>
</template>

<script setup lang="ts">
import { ref } from "vue";

const step = ref(6);
const loadMore = () => {
  step.value += 5;
};
</script>

<style scoped>
.ul-box {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
}

.ul-box li {
  background: #ecf5ff;
  padding: 8px 0px;
  text-align: center;
}
</style>

加载状态

在请求数据时，可搭配属性 loading 使用，同时支持使用 loading 插槽进行自定义效果。

• 1
• 2
• 3
• 4
• 5
• 6

<template>
  <z-infinite-scroll height="300px" @change="loadMore" :loading="loading">
    <ul class="ul-box">
      <li v-for="item in step" :key="item">{{item}}</li>
    </ul>
  </z-infinite-scroll>
</template>

<script setup lang="ts">
import { ref } from "vue";

const step = ref(6);
const loading = ref(false);
const loadMore = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    step.value += 5;
  }, 3000);
};
</script>

<style scoped>
.ul-box {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
}

.ul-box li {
  background: #ecf5ff;
  padding: 8px 0px;
  text-align: center;
}
</style>

自定义loading

• 1
• 2
• 3
• 4
• 5
• 6

<template>
  <z-infinite-scroll height="300px" @change="loadMore" :loading="loading">
    <ul class="ul-box">
      <li v-for="item in step" :key="item">{{item}}</li>
    </ul>

    <template #loading>
      <span>数据载入中...</span>
    </template>
  </z-infinite-scroll>
</template>

<script setup lang="ts">
import { ref } from "vue";

const step = ref(6);
const loading = ref(false);
const loadMore = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    step.value += 5;
  }, 3000);
};
</script>

<style scoped>
.ul-box {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
}

.ul-box li {
  background: #ecf5ff;
  padding: 8px 0px;
  text-align: center;
}
</style>

API 属性

属性名	说明	类型	默认值
width	容器宽度	string	100%
height	容器高度	string	100%
showScrollbar	显示滚动条	boolean	true
loading	加载状态	boolean	—

slot 插槽

插槽名	说明	参数
default	默认插槽，自定义数据列表	—
loading	自定义loading内容	—

event 事件

事件名称	说明	回调参数
change	触底时触发	() => void