前置き
ページネーションをやっていきます。
いくつかに分けて書いていきます。
今回は導入編として
どんな形でつくるかの大枠を説明🍒
いつも通り
超簡潔に説明できれば良いので
まずはこれだけ作りましょう🍀🧸
…
は？これだけ？
…
そうです👌笑
表示はこれだけですが、
導入としてこちらをやります。
・ページ遷移のmethods
・現在いるページにclassを付与
Let's try!
Step1: dataを用意
基本はページ番号 = 配列番号を
増やしたり減らしたり、
該当番号にクラスをつけるだけですね。
なのでまずはdataを用意🧸
初期値はそれぞれ0です。
・now = 現在のページ
・last = 残りのページ
一応ページコンテンツとして
数字の繰り返しだけいれておきましょう。
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<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も🍀
) pages
ページ表示部分を変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 変更前 <ul> <li> ページ番号 </li> </ul> // 変更後 <ul> <li :class="{ selected: newsSection.nav.now === 0}" @click="newsSection.nav.now = 0" > 1 </li> </ul> |
クラス部分追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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を付与
でした🍒
続きは実践編などで公開します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<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> |