Implement "infinite scrolling" in the homepage!

This commit is contained in:
Badri Sunderarajan 2020-03-09 19:31:46 +05:30
parent f447783c5c
commit 91f8268193
4 changed files with 61 additions and 4 deletions

View file

@ -12,7 +12,8 @@
"@gridsome/source-ghost": "^0.2.0", "@gridsome/source-ghost": "^0.2.0",
"@gridsome/transformer-remark": "^0.3.0", "@gridsome/transformer-remark": "^0.3.0",
"@tryghost/helpers": "^1.1.20", "@tryghost/helpers": "^1.1.20",
"gridsome": "^0.7.0" "gridsome": "^0.7.0",
"vue-infinite-loading": "^2.4.5"
}, },
"devDependencies": { "devDependencies": {
"node-sass": "^4.12.0", "node-sass": "^4.12.0",

View file

@ -1,8 +1,10 @@
import '~/assets/css/style.scss' import '~/assets/css/style.scss'
import DefaultLayout from '~/layouts/Default.vue' import DefaultLayout from '~/layouts/Default.vue'
import moment from "vue-moment" import moment from "vue-moment"
import InfiniteLoading from "vue-infinite-loading"
export default Vue => { export default Vue => {
Vue.component('Layout', DefaultLayout) Vue.component('Layout', DefaultLayout)
Vue.use(moment) Vue.use(moment)
Vue.use(InfiniteLoading)
} }

View file

@ -24,9 +24,22 @@
<main id="site-main" class="site-main outer"> <main id="site-main" class="site-main outer">
<div class="inner"> <div class="inner">
<div class="post-feed"> <div class="post-feed">
<Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" /> <Card v-for="{ node }, count in loadedPosts" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
<ClientOnly>
<infinite-loading @infinite="infiniteHandler" spinner="spiral">
<div slot="no-more">
That's it! You've scrolled through all the articles.
Now, how about <a :href="/write/">writing one yourself</a>?
</div> </div>
<div slot="no-results">
Sorry, no posts yet :(
</div>
</infinite-loading>
</ClientOnly>
<noscript>
<Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" /> <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</noscript>
</div>
</div> </div>
</main> </main>
</Layout> </Layout>
@ -47,6 +60,11 @@
background: black; background: black;
} }
.infinite-loading-container {
width: 100%;
padding: 2rem;
}
</style> </style>
<script> <script>
@ -76,6 +94,37 @@
HeroBgClass() { HeroBgClass() {
return 'site-header outer no-cover' return 'site-header outer no-cover'
} }
},
data() {
return {
loadedPosts: [],
currentPage: 1
}
},
created() {
this.loadedPosts.push(...this.$page.posts.edges)
},
methods: {
async infiniteHandler($state) {
console.log('Fetching infinite.')
if (this.currentPage + 1 > this.$page.posts.pageInfo.totalPages) {
console.log('State complete.')
$state.complete()
} else {
const { data } = await this.$fetch(
`/${this.currentPage + 1}`
)
if (data.posts.edges.length) {
console.log('Pushing next posts')
this.currentPage = data.posts.pageInfo.currentPage
this.loadedPosts.push(...data.posts.edges)
$state.loaded()
} else {
console.log('Bad data: state complete')
$state.complete()
}
}
}
} }
} }
</script> </script>

View file

@ -9049,6 +9049,11 @@ vue-hot-reload-api@^2.3.0:
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog== integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
vue-infinite-loading@^2.4.5:
version "2.4.5"
resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz#cc20fd40af7f20188006443c99b60470cf1de1b3"
integrity sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==
vue-loader@^15.7.1: vue-loader@^15.7.1:
version "15.7.2" version "15.7.2"
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.2.tgz#cc89e2716df87f70fe656c9da9d7f8bec06c73d6" resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.2.tgz#cc89e2716df87f70fe656c9da9d7f8bec06c73d6"