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


前置き


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

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


は?これだけ?


そうです👌笑

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

Let's try🌟

Step1: dataを用意

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

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

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

index.vue
<template>
 <div class="page">
   <ul>
     <li v-for="n in 5">
       {{ n }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
}
</script>

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

index.vue
<template>
 <div class="nav">
   <div
     class="prev"
     @click="clickPrevNewsPage()"
   >
     <svg /> // 省略
   </div>
   <ul>
     <li>
       ページ番号
     </li>
   </ul>
   <div
     class="next"
     @click="clickNextNewsPage()"
   >
     <svg /> // 省略
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
 methods: {
   clickPrevNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now - 1 < 0
       ? this.newsSection.nav.now
       : this.newsSection.nav.now - 1
   },
   clickNextNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now + 1 > this.newsSection.nav.last - 1
       ? this.newsSection.nav.now
       : this.newsSection.nav.now + 1
   },
 },
}
</script>

【解説】
◾️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も🍀

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

// 変更前
   <ul>
     <li>
       ページ番号
     </li>
   </ul>

// 変更後
   <ul>
     <li
       :class="{ selected: newsSection.nav.now === 0}"
       @click="newsSection.nav.now = 0"
     >
       1
     </li>
   </ul>

クラス部分追加。

index.vue
<style lang="scss" scoped>
  .nav {
     ul {
       li {
         &.selected {
           padding: 3px 5px;
           border: 1px solid #4B4B4B;
         }
       }
     }
  }
}
</style>

【解説】
: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を付与
でした🍒
続きは実践編などで公開します。

index.vue
<template>
 <div class="nav">
   <div
     class="prev"
     @click="clickPrevNewsPage()"
   >
     <svg /> // 省略
   </div>
   <ul>
     <li
       :class="{ selected: newsSection.nav.now === 0}"
       @click="newsSection.nav.now = 0"
     >
       1
     </li>
   </ul>
   <div
     class="next"
     @click="clickNextNewsPage()"
   >
     <svg /> // 省略
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
 methods: {
   clickPrevNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now - 1 < 0
       ? this.newsSection.nav.now
       : this.newsSection.nav.now - 1
   },
   clickNextNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now + 1 > this.newsSection.nav.last - 1
       ? this.newsSection.nav.now
       : this.newsSection.nav.now + 1
   },
 },
}
</script>

<style lang="scss" scoped>
  .nav {
     ul {
       li {
         &.selected {
           padding: 3px 5px;
           border: 1px solid #4B4B4B;
         }
       }
     }
  }
}
</style>

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪

https://twitter.com/aLizlab