Vueと共通

【Nuxt.js】queryを活かしたPaginationを作ろう

前置き

データ量の多いページで活躍する
ページネーション💫

以前にも解説しましたが、
もっとシンプルに分かりやすくしました🙌
まずは全体の構成を考えて枠組みを作って
そこから作り込む流れにしています✨

⬇️以前の解説記事はこちら
【Nuxt.js】pagination導入編:まずは大枠を理解しよう!
【Nuxt.js】pagination実践編:$router.pushで簡単実装!


全体の構成を考える

コンポーネント

数字などのまとまりなので
アトミックデザインの
moleculesで分類しています。
分け方、命名は参考程度にしてください🍀
molecules/Items/ItemPagination.vue


デザインの確認

まずは作りたいものを確認🌱👀

数字部分

現在いるページに合わせて
数字が…になったりします。
ただ1は固定で1なので
2以降の数字だけ
条件に合わせて

数字なのか…なのかを
指定する必要があります。

矢印

左右の矢印は
現在いるページ(now)が
最初のページ(now === 1)か
最後のページ(totalPage)なら
隣の矢印を透明にするclass名(inactive)を
付与すれば良いです。

遷移先

nuxt-link to=""の遷移先は
URLのqueryを使用したいので
queryというpropsを使って
親で文字列を指定するようにします。

querynowなどの変数と
?=という文字列を連結させたいので
テンプレートリテラルを使用します。
バッククォーテーションの中に
${変数}で繋げていきます。
URLのquery?から始まるので
このような感じになります。

⬇️params, queryはこちらでご確認ください👀
 localhost:3000/product?page=123
 ?より前のproductparams
 ?page=123queryです
【Nuxt.js】Vue Router基礎編:params, queryを使ってページ遷移

⬇️できれば遷移した時に
 いちいち上にスクロールするのが面倒なので
 v-sroll-toを使うと尚よしです✨
【Nuxt.js】plugin実践編:vue-scrolltoをページ遷移でも適応させよう


コード

スタイリングにまで書くと
コードが長くなって分かりにくいので
解説を読んでclass名と役割を把握してください👀

1についているcurrentクラスは
現在いるページだけ
色を反転させるようにするものです🌟

矢印はsvg画像を1つ用意し、
左右反転させています。
transform: scale(-1, 1);


現在いるページについて

全体の構成がわかったところで
数字の2以降は一旦おいておき、
現在いるページ(now)はどう出すのか
仕組みを把握しておきましょう🪐

親ページ

ページネーションを表示させる親ページでは
こんな感じのコードになります。
リストのデータはListProducts
というコンポーネントだとします。

limit(1ページに表示させるliの数)
などはおいといて、
:now="Number()"部分を見てみましょう。
$route.query
localhost:3000/?page=2
なら{"page": "2"}になりますね💡
現在いるページに必要な情報は
ページ数の2だけで良いので
$route.query[query]とすることで
query(Stringのpage)に対応する2
Numberで数値として返しているわけです。


数字の2以降のコード

nowの仕組みがわかったところで
ページネーションに戻りましょう。
矢印と1は邪魔なので
2以降の部分のみコードを載せます。

※最終的なコードは最後に載せています💫

⬇️totalPageが6以上でnowが3未満

⬇️totalPageからnowを引いて2未満

⬇️それ以外


まとめ

デザインを確認しながら
不要なコードはたたみながらやると
把握しやすいです✨
特に数字と…の切り替えをするところは
どこが並列で何の入れ子なのか
ハッキリさせることが大事ですね💡

-Vueと共通
-,

© 2021 aLiz Nuxt