Vue 仮想リストの実例

<テンプレート>
 <div class="無限スクロールリスト">
  <!-- 検索ボックス -->
  <div class="検索ボックス">
   <input type="text" v-model="検索クエリ"/>
  </div>
  <p class="center" v-if="results.length == 0 && !loading">
   何かを検索するには入力を開始します。
  </p>
  <!-- 仮想リスト -->
  <仮想リスト
   :data-key="'ページID'"
   :data-sources="結果"
   :data-component="アイテムコンポーネント"
   :ページモード="true"
   />
  <!-- 読み込み中 -->
  <loader v-if="読み込み中" />
 </div>
</テンプレート>

'axios' から axios をインポートします。
'lodash' から lodash をインポートします。
'vue-virtual-scroll-list' から VirtualList をインポートします。
'./SearchResult' から SearchResult をインポートします。
'./Loader' から Loader をインポートします。
エクスポートデフォルト{
 名前: 'EndlessList',
 コンポーネント:
  バーチャルリスト、
  ローダ
 },
 データ（） {
  戻る {
   検索クエリ: ''、
   現在のページ: 0,
   結果： []、
   項目コンポーネント: SearchResult、
   読み込み中: false
  }
 },
};

<テンプレート>
 <div class="リスト項目">
  <h3>
   {{ソース.title}}
  </h3>
  <div v-html="source.snippet"></div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具: {
  索引： {
   // 現在のアイテムのインデックス
   タイプ: 数値、
  },
  ソース： {
   タイプ: オブジェクト、
   デフォルト（） {
    戻る {};
   },
  },
 },
};
</スクリプト>

<スタイルスコープ>
.リスト項目{
 パディング: 0 10px 20px 10px;
}
.リスト項目 h3 {
 マージン: 0;
 パディング下部: 10px;
}
</スタイル>

検索(クエリ、ページ) {
 // Wikipedia API が期待するデータを準備します。
 定数データ = {
  アクション: "クエリ"、
  フォーマット: "json",
  リスト: "検索",
  続行: "-||",
  utf8: 1,
  srsearch: クエリ、
  sroffset: ページ * 10、
  起源： "*"、
 };
 // そして、これらのパラメータをGETパラメータの形式に変換します
 // アクション = クエリ & フォーマット = json ...
 定数パラメータ = Object.keys(データ)
  .map(関数(k) {
   戻りデータ[k] == ""
    ？「」
    : encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
  })
  。参加する（"＆"）;
 // パラメータ文字列を含むURLを準備します
 const searchUrl = `https://en.wikipedia.org/w/api.php?${params}`;
 // ローダーを表示できるように、loading を true に設定します 
 this.loading = true;
 // 次にリクエストを実行し、結果を連結します
 axios.get(searchUrl).then((レスポンス) => {
  this.results = this.results.concat(response.data.query.search);
  // もちろん、ローダーを非表示にするには、loading を false に設定します。
  this.loading = false;
 });
}

<スクリプト>
エクスポートデフォルト{
 // 簡潔にするため、data() とメソッドは省略します
 時計：
  検索クエリ: {
   即時: true、
   ハンドラ: lodash.debounce(function (newVal) {
    (newVal == "") の場合 {
     戻る;
    }
    this.results = [];
    this.currentPage = 0;
    this.search(newVal, this.currentPage);
    this.search(newVal, this.currentPage + 1);
    this.currentPage = 2;
   }, 200),
  },
 },
 マウント() {
  定数 vm = this;
  window.onscroll = lodash.debounce(function() {
   var 下からの距離 =
    document.body.scrollHeight - window.innerHeight - window.scrollY;
   if (distanceFromBottom < 400 && vm.searchQuery !== "") {
    vm.search(vm.searchQuery, vm.currentPage);
    vm.currentPage++;
   }
  }, 100, {leading: true});
 },
}
</スクリプト>

npm 実行 dev