vue.js

Vue.jsでページネーションをクリックしたらリストのトップへスムースクロールさせる

ページネーションをクリックしたらトップへ移動させる方法 7

はじめに

スマホでページネーション付きのリストを実装した時に、最後のページをクリックするとリストの高さが変わって、リストを見失ってしまいます。

ページネーションをクリックしたらトップへ移動させる方法 7

 

これを解決するために、ページネーションをクリックしたらリストのトップへスムースクロールさせることにしました。

 

導入

まずこれを実現するために、2つのライブラリを利用します。

  • vuejs-paginate
  • vue-scrollto

vuejs-paginateページネーションを実装するライブラリです。
これについての解説は下記の記事を参考にしてください。

「vuejs-paginate」を使ってページネーションを実装する

 

続いて、vue-scrolltoは特定の地点へスムーススクロールさせるライブラリです。
今回の実装の根幹になります。
解説は以下の記事を参考にしてください。

「vue-scrollto」を使ってイージングスクロールを実装する

 

 

完成イメージ

ページネーションをクリックしたらトップへ移動させる方法 7

HTML

ページネーションにクリックイベントclick-handlerを設定します。

<div id="app">
    <ul class="list-group">
      <li class="list-group-item" v-for="item in getItems">{{item}}</li>
    </ul>
    <paginate
    :page-count="getPageCount"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'<'"
    :next-text="'>'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</div>

スクリプト

var items = [];

for(var i=1; i<=105; i++){
  items.push('item-'+i);
}

Vue.component('paginate', VuejsPaginate)

new Vue({
   el: '#app',
   data: {
     items: items,
     parPage: 10,
     currentPage: 1
   },
   methods: {
    clickCallback: function (pageNum) {
       this.currentPage = Number(pageNum);
       this.$scrollTo('#app', 1000, {offset: -60});
    }
   },
   computed: {
     getItems: function() {
      let current = this.currentPage * this.parPage;
      let start = current - this.parPage;
      return this.items.slice(start, current);
     },
     getPageCount: function() {
      return Math.ceil(this.items.length / this.parPage);
     }
   }
 })

クリックイベントclickCallback内に this.$scrollTo(element, duration, options) を設定します。

 

サンプル

>>専用ページで確認する

 

 

さいごに

ページネーションをクリックしたらリストのトップへスムースクロールさせる方法でした。

今日はこの辺でー

  • この記事を書いた人

カバノキ

-vue.js
-, , ,

© 2020 kabanoki.net