BLOG

ブログ

3ステップでできる【Vue.js】無限スクロールを簡単に実現する方法

タロウです!

Vue(Nuxt)での無限スクロールがあまりに簡単だったので紹介します!

無限スクロールとは…

ページを一定の場所までスクロールすると勝手に次が読み込まれるアレです。

TwitterやInstagramのような動きです。

とても優秀なプラグイン「vue-infinite-loading」を使用します!

手順

  • プラグインをインストール
  • コードを書いてみよう
  • カスタマイズしてみよう

STEP1.プラグインをインストール

npm install vue-infinite-loading --save

STEP2.コードを書いてみよう

コードは大きく2つに分けて書いていきます。

  • 無限スクロールさせたいページを作成
  • 読み込み処理の実装

まずはページから作っていきましょう!

無限スクロールさせたいページを作成

新しくページを作成します。

<template>
  <section class="container">
    <div>
      <h1 class="title">
        infinite-loading
      </h1>
      // リストを表示する部分
      <ul class="list">
        // 下記のようにv-forでループして変数
        <li class="item" v-for="(item, index) in this.news" :key="index">{{ item + index }}</li>
      </ul>
      // 自動読み込みのブロック 一定の部分までスクロールされると@infinite=で指定したmethodが実行される
      <infinite-loading ref="infiniteLoading" spinner="circle" @infinite="infiniteLoad">
        // ステータスがcompleteに更新されると下記が表示される
        <span slot="no-more">-----検索結果は以上です-----</span>
        // 結果が存在しない場合下記が表示される
        <span slot="no-results">-----検索結果はありません-----</span>
      </infinite-loading>
    </div>
  </section>
</template>
<script>
  import InfiniteLoading from 'vue-infinite-loading';
  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        news: []
      }
    },
      methods: {
      /*
       * infiniteLoad
       * 自動実行されるmethod  
       */
      infiniteLoad() {
        // itemの生成
        for(let i=0;i<20;i++){
          this.news.push("ニュース");
        }
        this.$refs.infiniteLoading.stateChanger.loaded();
        if (this.news.length == 100) {
          this.$refs.infiniteLoading.stateChanger.complete();
        }
      },
    }
  }
</script>
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 100px;
}
.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
ul, ol {
  padding: 0;
  position: relative;
}
ul li, ol li {
  color: black;
  border-left: solid 8px orange;/*左側の線*/
  background: whitesmoke;/*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
  padding: 0.5em;
  list-style-type: none!important;
}
</style>

こんな感じ書いていきます。

あくまでもある一定のとこまでスクロールしたら続きをデータを読み込むのが基本的な使い方なので、

リスト表示(ここだとulタグ)の直下にくるように配置します。
コードの作成は以上です!簡単!

STEP3.カスタマイズしてみよう

なんとこのプラグイン、

読み込み中のアニメーションや、自動実行させるスクロールの高さなどをカスタマイズできます!

Spinner

読み込み中のグルグルを表現してくれます。

default<infinite-loading spinner="default" >
circle<infinite-loading spinner="circle" >
bubbles<infinite-loading spinner="bubbles" >
spiral<infinite-loading spinner="spiral" >
waveDots<infinite-loading spinner="waveDots" >

Distance

読み込み処理の実行位置を調整できます。
※デフォルト(指定無しの場合)は100px

画面下部から500px内に入ったら実行<infinite-loading distance=500 >

Direction

読み込み処理を実行する方向を指定できます。
※デフォルト(指定無しの場合)はbottom

上方向にスクロールして範囲内に入ったら実行<infinite-loading direction="top" >
下方向にスクロールして範囲内に入ったら実行<infinite-loading direction="bottom" >

まとめ

とても使いやすく、カスタマイズに記載したオプションさえ抑えて置けばサクッとカッコよく表現できます。
実際に、自動実行されるinfiniteLoad()でニュースや写真を取得するAPIを使うことでより深く勉強できそうです。
以上、自動スクロールの実現方法でした!

RELATED ARTICLE