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

vue-mugen-scrollとは

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

【動画サイズ：95KB】

環境

インストール

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

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リポジトリは以下から取得できます。

導入手順

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ライブラリでした。

今日はこの辺でー