【Nuxt.js】pagination導入編：まずは大枠を理解しよう！
🎈 この記事はWPへ移行しました
【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が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>クラス部分追加。
<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>次回はpluginについて
使えるものをご紹介🌟
公開予定日は1/17(金)です。
このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪
🎈 この記事はWPへ移行しました
【Nuxt.js】pagination導入編：まずは大枠を理解しよう！
この記事が気に入ったらサポートをしてみませんか？