Infinite Scroll UI Components vue.js ライブラリ

ajaxでデータを取得しつつ配信するInfinite scrollライブラリ「vue-mugen-scroll」

vue-mugen-scrollとは

vue-mugen-scrollは、ajaxなどでスクロールしながらデータを追加していくInfinite scrollライブラリです。

 

【動画サイズ:95KB】

 

環境

Vue 2.6.10
vue-mugen-scroll 0.2.6

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm install --save vue-mugen-scroll

UMD

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-mugen-scroll.min.js"></script>

 

gitリポジトリは以下から取得できます。

 

導入手順

step
1
メソッドを設定

new Vue({
  el: '#app',
  data: {
    posts: [],
    loading: false
  },
  created: function() {
    this.getPosts();
  },
  methods: {
    getPosts: function() {
      for (var i = 0; i < 20; i++) {
	var count = this.posts.length + i
      	this.posts.push({
          title: 'title ' + count
        })
      }
    }
  }
});

step
2
テンプレートを準備

各種コンポーネントを設置します。

サンプルはケバブケースで記載しています。

<div id="app">
  <ul class="list-group">
    <li v-for="post in posts" class="list-group-item">{{post.title}}</li>
  </ul>
  <mugen-scroll :handler="getPosts" :should-handle="!loading">
    loading...
  </mugen-scroll>
</div>

サンプル

See the Pen ajaxでデータを取得しつつ配信するInfinite scrollライブラリ「vue-mugen-scroll」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

ajaxなどでスクロールしながらデータを追加していくInfinite scrollライブラリでした。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

-Infinite Scroll, UI Components, vue.js, ライブラリ
-, , , ,