withアプリーチSNSや記事投稿アプリ、ブログなどを作成している時にタイムラインに記事を全て表示させないように無限スクロールを実装したくなりました。Ui」を使えば簡単に導入できそうだったので導入方法と実際にアレンジして組み込む方法をまとめて行きたいと思います。Ui自体を導入して有効化する方法は2つあります。フルインストールオンデマンドインストール今回は「オンデマンドインストール必要なコンポーネントだけを選択して導入する方法」=の場合にInfinityScrollを組み込む方法をまとめていきます。フルインストールの場合は設定不要で使えるはずですので試してみてください。element.jsに通常コンポーネント同様、読み込みuseを使って有効化させます。})通常のコンポーネントの場合、13〜18行目のように読み込んだコンポーネントをVueオブジェクトにcomponentsとして紐づけ、Element独自のタグとして使用できるようになります。:closable="false"></el-alert>しかしInfinityScrollはElement独自のタグとしては定義されていないのでcomponentとしての紐付けではなくuseのみで機能してくれます。私はコンポーネントをひとまとめに定義しVueオブジェクトに紐づけていました。それもありVueオブジェクトにライブラリを適応させる基本的な流れを忘れていたためuseさせるのを忘れており使えない問題が発生していました。Vueオブジェクトにライブラリを適応させる基本的な流れライブラリをelement.jsに読み込むVueオブジェクトに紐づけるInfinityScrollを連想配列(API)にアレンジInfinityScrollのデフォルトのコードはv-forで繰り返し表示させる値がcount(ただの数字)になっています。この部分に繰り返し表示させたいデータ(記事情報)などを持ってこればOKです。}</script>単純にcountの部分を連想配列を持った変数に置き換えれば無限スクロールは機能してくれます。表示する数を指定し、一番下にスクロール時に追加で表示していくタイプを実装したい時は以下のコードで可能です。}</script>まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。ご覧いただきありがとうございました。友達や家族の誕生日を登録しておくと当日に通知が届きお知らせしてくれるiOSアプリです。貸し借り管理アプリお金の貸し借りを管理するためのアプリです。貸借の色が分かれているので識別しやすく、使いやすさを求めてできるだけシンプルなUIにしています。カシホン人に貸すことが多く、誰に貸したか忘れがちな本の貸し借りを記録できるアプリです。