snipette/snipette-gridsome
snipette/snipette-gridsome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make pagination-bar hiding more seamless

Browse source 
Now, it goes away the moment JavaScript is loaded, and also fades
out nicely even if you do happen to look at it. The extraneous
console.log messages are also gone.
This commit is contained in:
Badri Sunderarajan 2020-03-15 12:19:45 +05:30
parent 0ae46197b6
commit 9be6baae52
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/pages/Index.vue
View file

@ -37,7 +37,9 @@
</div>
</infinite-loading>
</ClientOnly>
<Pager v-if="!infiniteLoadingActivated" :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
<transition name="fade">
<Pager v-show="!infiniteLoadingActivated" :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</transition>
</div>
</main>
</Layout>
@ -113,24 +115,22 @@
this.loadedPosts.push(...this.$page.posts.edges)
this.infiniteLoadingActivated = false
},
mounted() {
this.infiniteLoadingActivated = true
},
methods: {
async infiniteHandler($state) {
console.log('Fetching infinite.')
this.infiniteLoadingActivated = true
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()
}
}