アプリ サイト

【Nuxt.js】pagination導入編:まずは大枠を理解しよう!

前置き

ページネーションをやっていきます。
いくつかに分けて書いていきます。
今回は導入編として
どんな形でつくるかの大枠を説明🍒

いつも通り
超簡潔に説明できれば良いので
まずはこれだけ作りましょう🍀🧸


は?これだけ?



そうです👌笑

表示はこれだけですが、
導入としてこちらをやります。
・ページ遷移のmethods
・現在いるページにclassを付与

Let's try!

Step1: dataを用意

基本はページ番号 = 配列番号を
増やしたり減らしたり、
該当番号にクラスをつけるだけですね。

なのでまずはdataを用意🧸
初期値はそれぞれ0です。
・now = 現在のページ
・last = 残りのページ

一応ページコンテンツとして
数字の繰り返しだけいれておきましょう。

) pages

Step2: methodsを用意

【動作】
矢印を押すとそれぞれmethodsで
Step1で用意したdataを動かしていきます。
5ページ(0~4番号)あるので、
はみ出す分はそれぞれ-1と5
はみ出したら0か4に戻します。
・now
・last
現在のページ数を反映させるものは
実践編で解説します。

【methods】
・←を押すとclickPrevNewsPage
・→を押すとclickNextNewsPage

【式】
三項演算を使用
式1 ? 式2 : 式3

式1がtrueなら式2、falseなら式3

) pages

【解説】
◾️clickPrevNewsPage
 ※nowが0の時は1ページ目。
式1
・パターン1

 現在1ページ(配列番号0)なら
 0 = 0 - 1 < 0
 trueなので式2を実行
・パターン2
 現在4ページ(配列番号3)なら
 3 = 3 - 1 < 0
 falseなので式3を実行

 式2 true
  now = 0なので0番目(1ページ目)にする
  = - 1番目(0ページ目)にはいけない
 式3 false
  - 1して1ページ戻る

順番的に分かりにくいかもしれませんが要は
nowが0以上の時は - 1していって、
- 1になったら0に戻すと言うことですね。

◾️clickNextNewsPage
※nowが4の時は最終ページ。
式1
・パターン1
 現在5ページ(配列番号4)なら
 残り2ページ(配列番号4, 5)
 4 = 4 + 1  > 2 - 1
 2 - 1を左辺にもっていくので
 ・ - 1にチェンジ
 ・符号も逆向きにチェンジ
 4 - 1 =< 5
 trueなので式2を実行
・パターン2
 現在4ページ(配列番号3)なら
 残り3ページ(配列番号3, 4, 5)
 3 = 3 + 1 > 3 - 1
 3 + 2 =< 4
 falseなので式3を実行

 式2 true
 now = 4なので4番目(5ページ目)にする
  = 5番目(6ページ目)にはいけない
 式3 false
  + 1して1ページ進む

複雑になってきましたが
1度理解すればテンプレとして使えますね🌟

classを付与

1ページ目にいる時は
そこだけボーダーをつけます。
ついでにクリックしたら
該当ページに飛ぶように@clickも🍀

) pages

ページ表示部分を変更します。

クラス部分追加。

【解説】
:class="{ class名: 式 }"
クラスバインディングで
nowが0と完全一致した場合のみ
selectedクラスを付与します。
つまり0番目の1ページにいる時は
1ページだけにボーダーつけてくれます。
https://jp.vuejs.org/v2/guide/class-and-style.html
==と===の違いはこの記事が分かりやすいです!
https://www.sejuku.net/blog/23942

@click="newsSection.nav.now = 0"
now = 現在いるページ
0にするので0番目(1ページ目)にする

ここまでのコード

毎度のことですが、
cssはほとんど省いております。
今回は
・ページ遷移のmethods
・現在いるページにclassを付与
でした🍒
続きは実践編などで公開します。

-アプリ, サイト
-, ,

© 2020 aLiz Nuxt