Skip to content

Instantly share code, notes, and snippets.

@oumoussa98

oumoussa98/index.html

Last active October 19, 2023 17:28
Show Gist options
  • Save oumoussa98/7184e74bab47d78a60a8bdf0aea68d96 to your computer and use it in GitHub Desktop.
Save oumoussa98/7184e74bab47d78a60a8bdf0aea68d96 to your computer and use it in GitHub Desktop.
Download ZIP
infinite loading example
Raw
index.html
<html>
<head>
<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
<script src="https://unpkg.com/v3-infinite-loading@1.2.2/lib/v3-infinite-loading.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/v3-infinite-loading@1.2.2/lib/style.css" />
<style>
#app {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
margin: 20px auto 20px auto;
max-height: 600px;
max-width: 400px;
overflow-y: scroll;
}
.result {
font-weight: 300;
width: 80%;
padding: 20px;
text-align: center;
background: #eceef0;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="result" v-for="comment in comments" :key="comment.id">
<div>{{ comment.email }}</div>
<div>{{ comment.id }}</div>
</div>
<infinite-loading target="#app" @infinite="load"></infinite-loading>
</div>
<script>
const { ref, createApp } = Vue;
const app = createApp({
setup() {
let comments = ref([]);
let page = 1;
const load = async $state => {
console.log("loading...");
try {
const response = await fetch("https://jsonplaceholder.typicode.com/comments?_limit=10&_page=" + page);
const json = await response.json();
if (json.length < 10) $state.complete();
else {
comments.value.push(...json);
$state.loaded();
}
page++;
} catch (error) {
$state.error();
}
};
return {
load,
comments,
page,
};
},
});
app.component("infinite-loading", V3InfiniteLoading.default);
app.mount("#app");
</script>
</body>
</html>
@impactcolor
Copy link

Thanks for setting this up. I notice when I set the width of result to say 500px there's a certain limit. Is there a limit on the infinite css that prevents it from expanding a certain amount? @oumoussa98

@oumoussa98
Copy link
Author

no there isn't, for this example it's just because the wrapper div with id="app" has a max-width: 400px

@joydeep-bhowmik
Copy link

how to overide default slots?

@agm1984
Copy link

agm1984 commented Oct 19, 2023

I'm getting an error in the watcher about identifier being undefined. I don't see anything in the examples or docs that talks about what identifier is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment