NuxtJS пагинация
Разрабатываем компонент пагинации контента на NuxtJS
План такой:
- переделываем script для page/content/index.vue
- создаем компонент ThePagination
- настраиваем внешний вид пагинации (на свой вкус)
Выводим список
<script>
const pagination = {
getPostsOfPage($content, page) {
return $content('blog')
.sortBy('date', 'desc')
.skip(10 * (page - 1))
.limit(10)
.fetch()
},
async getNumberOfPages($content) {
return Math.ceil((await $content('blog').only([]).fetch()).length / 10)
},
}
export default {
async asyncData ({ $content, route }) {
const page = parseInt(route.query.page || '1') || 1
const [posts, pageCount] = await Promise.all([
pagination.getPostsOfPage($content, page),
pagination.getNumberOfPages($content),
])
return { posts, page, pageCount }
},
data() {
return {
posts: [],
pageCount: 1,
}
},
computed: {
page: function () {
return this.$route.query.page || 1
}
},
watch: {
async page() {
this.$router.replace({ path: '/blog', query: { page: this.page } })
this.posts = await pagination.getPostsOfPage(this.$content, this.page)
},
},
head () {
return {
title: 'Блог Валерия Малышева',
meta: [
{
hid: 'description',
name: 'description',
content: 'Блог веб-программиста Валерия Малышева'
}
]
}
}
}
</script>
Лимит записей: 10, меняем под себя.
В template выводим компонент который мы создадим в следующем шаге:
<ThePagination v-model="page" :pageCount="pageCount" :route="this.$route" />
В pageCount выводим общее количетсво постов, route передаем для получения активной страницы и назначения ей класса active (потому что когда я писал this.$route в компоненте у меня ругалось что это не реактивно).
Создаем компонент ThePagination
В папка components создаем файл ThePagination.vue со следующим содержимым:
<template>
<ul class="pagination">
<li v-for="page in pageCount">
<button
@click="goto(page)"
:class="{'active': activePage == page}"
>
{{ page }}
</button>
</li>
</ul>
</template>
<script>
export default {
props: {
pageCount: {
type: Number,
required: true
},
route: {
type: Object,
required: true
},
},
methods: {
goto(page) {
this.$emit('input', page)
}
},
computed: {
activePage: function () {
return this.route.query.page || 1
}
}
}
</script>
Вот и всё! Пагинация работает, осталось её только оформить и хорошо было бы добавить scroll к началу списка постов при клике на номер страницы в блоке пагинации.
Для этого установим vue-scrollto
npm install --save vue-scrollto
и в компонент пагинации добавим:
var VueScrollTo = require('vue-scrollto');
export default {
// ...
methods: {
goto(page) {
this.$emit('input', page)
VueScrollTo.scrollTo('.grid');
}
},
// ...
}
Вместо .grid указываем элемент к которому нужно скролить.
Опубликовано 18 апреля 2021 г. в категории: NuxtJS
Если Вам необходимо внедрить данную разработку на свой проект, свяжитесь со мной, обсудим цену и срок.
