Vue 虚拟列表，纵享丝滑【实践篇】

<template>
  <div class="endless-scrolling-list">
    <!-- 搜索框 -->
    <div class="search-box">
      <input type="text" v-model="searchQuery"/>
    </div>
    <p class="center" v-if="results.length == 0 && !loading">
      Start typing to search something.
    </p>
    <!-- 虚拟列表 -->
    <virtual-list
      :data-key="'pageid'"
      :data-sources="results"
      :data-component="itemComponent"
      :page-mode="true"
      />
    <!-- loading -->
    <loader v-if="loading" />
  </div>
</template>

import axios from 'axios';
import lodash from 'lodash';
import VirtualList from 'vue-virtual-scroll-list';
import SearchResult from './SearchResult';
import Loader from './Loader';
export default {
  name: 'EndlessList',
  components: {
    VirtualList,
    Loader
  },
  data() {
    return {
      searchQuery: '',
      currentPage: 0,
      results: [],
      itemComponent: SearchResult,
      loading: false
    }
  },
};

<template>
  <div class="list-item">
    <h3>
      {{ source.title }}
    </h3>
    <div v-html="source.snippet"></div>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      // index of current item
      type: Number,
    },
    source: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style scoped>
.list-item {
  padding: 0 10px 20px 10px;
}
.list-item h3 {
  margin: 0;
  padding-bottom: 10px;
}
</style>

search(query, page) {
  // We prepare the data that the Wikipedia API expects.
  const data = {
    action: "query",
    format: "json",
    list: "search",
    continue: "-||",
    utf8: 1,
    srsearch: query,
    sroffset: page * 10,
    origin: "*",
  };
  // And then we convert these params TO GET params in the format
  // action=query&format=json ...
  const params = Object.keys(data)
    .map(function(k) {
      return data[k] == ""
        ? ""
        : encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
    })
    .join("&");
  // We prepare the url with the params string
  const searchUrl = `https://en.wikipedia.org/w/api.php?${params}`;
  // we set loading to true so that we can display the loader 
  this.loading = true;
  // Then we execute the request and concatenate the results
  axios.get(searchUrl).then((response) => {
    this.results = this.results.concat(response.data.query.search);
    // And of course set loading to false to hide the loader.
    this.loading = false;
  });
}

<script>
export default {
  // data() and methods skipped for brevity
  watch: {
    searchQuery: {
      immediate: true,
      handler: lodash.debounce(function (newVal) {
        if (newVal == "") {
          return;
        }
        this.results = [];
        this.currentPage = 0;
        this.search(newVal, this.currentPage);
        this.search(newVal, this.currentPage + 1);
        this.currentPage = 2;
      }, 200),
    },
  },
  mounted() {
    const vm = this;
    window.onscroll = lodash.debounce(function () {
      var distanceFromBottom =
        document.body.scrollHeight - window.innerHeight - window.scrollY;
      if (distanceFromBottom < 400 && vm.searchQuery !== "") {
        vm.search(vm.searchQuery, vm.currentPage);
        vm.currentPage++;
      }
    }, 100, {leading: true});
  },
}
</script>

npm run dev