Vue.jsでSEO対策した無限スクロール（Infinite Scroll）を実現する

1vue create sample-inifnite-scroll

1npm install vue-infinite-loading -save

1yarn add vue-infinite-loading

1<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>

1<template>
2  <div id="app">    
3    <!--リストを表示する部分-->
4    <ul class="list">
5      <li class="item" v-for="(item, index) in this.items" :key="index">{{item}}</li>
6    </ul>
7    <!--下スクロールした時に、次のページのデータを取得する無限スクロールコンポーネント-->
8    <infinite-loading v-if="hasNext" @infinite="infiniteHandler" spinner="spiral" direction="bottom">
9      <div slot="no-more">No more</div>       <!--これ以上表示するデータがない時に表示されるメッセージ-->
10      <div slot="no-results">No results</div> <!--検索結果がない時に表示されるメッセージ-->
11    </infinite-loading>
12  </div>
13</template>

1import InfiniteLoading from 'vue-infinite-loading'
2
3export default {
4  name: 'App',
5  components: {
6    InfiniteLoading
7  },
8  data() {
9    return {
10      items: [],            // リストに表示するデータ
11      startPage: 0,         // 開始ページ番号
12      endPage: 0,           // 終了ページ番号
13      totalPages: 0,        // 総ページ数
14      pageSize: 20,         // １ページに表示するデータ件数
15      initialized: false    // 初回データアクセスが完了した後にtrueを設定するフラグ
16    }
17  },
18  computed: {
19    hasNext() {
20      return this.initialized && this.totalPages > this.endPage
21    }
22  },
23  mounted() {
24
25    // 現在表示中のページ番号をURLに設定する為に、スクロールイベントを監視
26    window.addEventListener("scroll", () => this.scroll())
27
28    const urlParams = new URLSearchParams(window.location.search);
29    const page = urlParams.get('page');
30
31    if (page) {
32      // URLパラメータでページ番号が指定された場合、指定ページから表示
33      this.startPage = parseInt(page, 10)
34      this.endPage = parseInt(page, 10)
35    } else {
36      // ページ番号の指定がない場合は１ページ目から表示
37      this.startPage = 1
38      this.endPage = 1
39    }
40
41    // 初回データアクセス
42    this.getItems(null, this.startPage, false)
43  },
44  methods: {
45
46    // スクロール時に、次ページに表示するデータを取得する処理
47    infiniteHandler($state) {
48      if (this.endPage >= this.totalPages) {
49        // 表示するデータが無くなったら$state.complete()を呼ぶ
50        $state.complete()
51      } else {
52        // 表示するデータがある場合、時ページのデータを読み込む
53        this.getItems($state, this.endPage + 1, true)
54      }
55    },
56
57    // ページに表示するデータを検索する処理
58    getItems($state, page, next) {
59      setTimeout(() => {
60
61        // 読込データを設定（実際はaxiosなどで非同期でデータを取得する想定）
62        let data = []
63        for (let i = 1 ; i <= this.pageSize; i++) {
64          data.push(`item${page}-${i}`)
65        }
66        // 総ページ数を設定（これも実際はaxiosなどで非同期でデータを取得する想定）
67        this.totalPages = 10
68
69        // 現在表示しているデータの末尾に取得したデータを追加
70        this.items = this.items.concat(data)
71        this.endPage = page
72
73        // $state.loaded()でデータの読込完了を通知する
74        if ($state) $state.loaded()
75
76        this.$nextTick(() => {
77          this.initialized = true
78        })
79      }, 1000)
80    },
81
82    // スクロールイベント発生時の処理
83    scroll() {
84      // 現在のスクロールY座標から、画面に表示されているページ番号を計算する
85      let scroll_pos = window.pageYOffset || document.documentElement.scrollTop
86      let window_height = window.outerHeight
87      let page = Math.ceil((scroll_pos + 0.5 * window_height) / 40 / this.pageSize) + (this.startPage - 1)
88      // replaceStateでurlを書き換え（urlパラメータにページ番号を設定）
89      window.history.replaceState(null, null, "/?page=" + page)
90    }
91  }
92}

1.list {
2  list-style: none;
3  margin: 0;
4  padding: 0;
5}
6.list li {
7  height: 40px;
8  border-top: solid 1px #ccc;
9  border-bottom: solid 1px #777;
10  box-sizing: border-box;
11  margin: 0;
12  padding: 0;
13}

1npm run serve