アプリ サイト

【Nuxt.js】pagination実践編:$router.pushで簡単実装!

前置き

ページ数に応じて
urlと表示が変わるpaginationです🍒
前回やった導入編と全く別物です!
こっちの方が簡単なので別パターンとして紹介🌟

記事タイトルが紛らわしいので、
まとめて名称変えるかもしれません。
こちらの続きはまた別記事にて…!

構成

・pagination部分をコンポーネント化
・使用するページからpropsでdataを渡す🎁
・ページ数をurlに表示させる🔍($router.push)
・全7ページで、ページ数に応じて表示を変更

Step1: コンポーネントでpropsを用意

【構成】
使うコンテンツによって
最大ページ数などが変わるためpropsを使用
・query: ページネーションを使うコンテンツ
・length: ページの長さ
・now: 今いるページ

) components

Step2: コンポーネントで戻る・進むボタンを追加

【式】三項演算を使用
式1 ? 式2 : 式3
式1がtrueなら式2、falseなら式3

) components

【解説】
◾️戻る
・|| または

該当コンテンツページ内queryの
今いるページnowから1戻る、または1にする

◾️進む
該当コンテンツページ内の
今いるページに1を足して
・全体ページ数と同じ
・またはそれより小さい場合
今いるページから1進む
そうでなければ全体ページ数にする

つまり全体ページを7で、
現在いるページが7なら
7 + 1 <= 7 
falseになるので7のまま
それ以上進むことはないですね🍀

あれ?😶
【戻る】すごくシンプルに見えるのに…

【進む】は何か長い。

これではダメなの???🌨

最大ページ数を越えてどんどん進みます笑
lengthの値はマイナスにはできません。
そのため制限をかけなくても
勝手に1で止まってくれるのですが…!
プラスは制限をかけないと止まりません🏃‍♀️💨

Step3: コンポーネントでページ数を表示

【構成】
ページ数の表示部分を作りましょう!
・5ページまではページ数分のみ表示
・6ページ以上は…(三点リーダー)で中間を省略

【CSS】
毎度のことですが省きます。
・…はcssでdotクラスでborderを使用
・現在ページがをクラスバインディングで
 background-color, colorを変更🎨

【if, if, if…】
ifで沢山分岐しています笑
どこで並列になってるか分かりにくいですね🤔
コンパクトにして全体構造を把握しましょう。

【Pagination.vue】
主にインラインのコメントで解説!
コードでも並列部分を絵文字で区別しています。
🍀と🐥が並列で使われている部分です。
それ以外の絵文字は if の目印です!

) components

これで完成です🤗

【最大ページ2は?】
if は最大ページ3以上で分岐。
2はどうなっているかというと…
ul 内の構造を黄色い枠で分けています🐥
・1固定表示
・3ページ以上で分岐
・最大ページ固定表示

2が最大の場合は
最大ページを表示させてるわけです🌟

Step4: コンテンツページでpropsにdataを渡す

【index.vue】
queryはstring型のため
urlにページ数を入れたいなら
Numberに変更する必要があります。
Number($route.query.members) が
0 or falseなら1になる

・A || B
AまたはB の意味もありますが
A ? A : B 三項演算と同じでもあります!

-アプリ, サイト
-, ,

© 2020 aLiz Nuxt