Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template></template>
<script>
export default {
props: {
paginationBox: {
required: true
},
src: {
default: ''
},
margin: {
default: 0
}
},
data() {
return {
currentPage: 1,
onLoad: false
}
},
methods: {
load(url, element) {
return fetch(url).then((res) => {
return res.text();
}).then((data) => {
let slicex = data.indexOf("<body");
slicex = data.indexOf(">", slicex);
const slicey = data.lastIndexOf("</body>");
const content = data.slice(slicex + 1, slicey);
const body = document.createElement("body");
body.innerHTML = content;
const response = body.querySelector(element);
if (response) {
return response.innerHTML;
}
return null;
})
},
getMore() {
this.currentPage++;
this.onLoad = true;
this.load(this.src + this.currentPage, this.paginationBox).then((data) => {
const item = document.querySelector(this.paginationBox);
item.innerHTML += data;
this.onLoad = false;
});
},
checkNeedMoreData() {
let bottom = this.$el.getBoundingClientRect().bottom;
bottom -= this.margin;
return bottom <= window.innerHeight && !this.onLoad;
}
},
mounted() {
if (this.checkNeedMoreData()) {
this.getMore();
}
window.addEventListener('scroll', () => {
if (this.checkNeedMoreData()) {
this.getMore();
}
});
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.