無限スクロールの話

2019/07/24

v-kansai #8 Short LT

jiyuujin

  • Vue/Nuxt/PHP/Scala/Java/Swift
  • v-kansai/kansai.ts/..
  • Web猫ブログ (webneko.dev)

とある新規案件をやってますが

環境周りの改善を主に

技術スタック

  • Vue CLI v3 (PHP) + TypeScript
  • その他 Jest、Gitlab-CI
  • 基本的には PHP側でレンダリング を行う
  • ビルドによるトランスパイル済みファイルを利用する

纏めれてないのでまたの機会🙏

vue-infinite-loading

使ったことあるひと🙋‍♀️

事前準備

plugins/infinite-loading.ts

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.component('infinite-loading', InfiniteLoading)

型定義

types/shims-vue.d.ts

declare module 'vue-infinite-loading' {
  import Vue from 'vue'

  export default class InfiniteLoading extends Vue {
    spinner: string;
    direction: string;
    distance: number;
    onInfinite: Function;
    forceUseInfiniteWrapper: boolean;
  }

  export interface StateChanger {
    complete(): void;
    loaded(): void;
    reset(): void;
  }
}

後から気付いたこんなイシューが

https://github.com/PeachScript/vue-infinite-loading/issues/139#issue-307231773

対象データはObjectで保持

コンポーネントでは

最初は 1ページ分を表示

<div
    v-for="(item, index) in responseData"
    :key="item.id"
>
    <div v-if="index < PER_PAGE">
        <!-- コンテンツを表示します -->
    </div>
</div>

no-ssr必須

<no-ssr>
    <infinite-loading 
        spinner="spiral"
        @infinite="infiniteHandler"
    >
        <span slot="no-more">読み込み終わりました</span>
    </infinite-loading>
</no-ssr>

ハンドラをトリガーに

特別な引数の存在

infiniteHandler($state: any) {
    setTimeout(() => {
        if (this.count < this.posts.length) {
            this.count += PER_PAGE
            $state.loaded()
        } else {
            $state.complete()
        }
    }, 1000)
}

基本的にはこれだけ!

是非ご検討くださいませ🙇‍♀️

#9 は FJUGさんと共催!

#2 やります!

Vue Fes前に秋田へ

ご清聴ありがとうございました🙇‍♀️

無限スクロールの話 #v_kansai

By jiyuujin

無限スクロールの話 #v_kansai

Vueプロジェクトで簡単に無限スクロールを実現したい

  • 175
Loading comments...

More from jiyuujin