Vue vuejs-paginate scrollto

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height:800px;
}


h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

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);
     }
   }
 })