InfiniteScroll

Load more at the end

Loads the next page as the reader nears the end of a feed. It suits browsing (a timeline, search results you skim); for results people come back to, share or need the footer of, Pagination is kinder.

Basic

• 第1話
• 第2話
• 第3話
• 第4話
• 第5話
• 第6話
• 第7話
• 第8話
• 第9話
• 第10話
• 第11話
• 第12話

<script setup lang="ts">
import { ref } from "vue";
import { BlessInfiniteScroll, BlessList, BlessListItem, BlessMockup } from "blessing-ui";
const items = ref(Array.from({ length: 12 }, (_, i) => i + 1));
const box = ref<HTMLElement>();
function load(done: (finished?: boolean) => void) {
  setTimeout(() => {
    const n = items.value.length;
    items.value.push(...Array.from({ length: 10 }, (_, i) => n + i + 1));
    done(items.value.length >= 52);
  }, 700);
}
</script>

<template>
  <BlessMockup type="phone" style="width: 260px">
    <div ref="box" style="height: 100%; overflow-y: auto">
      <BlessInfiniteScroll :root="box" done-text="that's all 52" @load="load">
        <BlessList>
          <BlessListItem v-for="i in items" :key="i">第{{ i }}話</BlessListItem>
        </BlessList>
      </BlessInfiniteScroll>
    </div>
  </BlessMockup>
</template>

• @load gets a done callback: call done() when the page is in, done(true) when there are no more. While loading, "Loading more" (loadingText) is announced.
• disabled pauses it and turning it back on resumes. Where scrolling can't trigger loading (no IntersectionObserver), a Load more button (moreLabel) takes its place.

Usage

import { BlessInfiniteScroll } from "blessing-ui";

API

Props

Name	Type	Default	Description
disabled	boolean	—	stop observing (no more pages)
offset	number	200	px before the end to fire
root	HTMLElement | null	—	scroll container ref; default = nearest scrollable ancestor / viewport
doneText	string	—
loadingText	string	"Loading more"	read while a page loads (the spinner is decorative)
moreLabel	string	"Load more"	label of the button shown where scrolling can't trigger loading

Events

Name	Payload	Description
load	[done: (finished?: boolean | undefined) => void]

Slots

Name	Scope	Description
default	—
loading	—
done	—

Exposed

Name	Type	Description
reset	() => boolean