Vue.JS 开源：vue-recyclerview－超大数据列表解决方案

   <h2>vue-recyclerview</h2>    <p>Mastering Large Lists with the vue-recyclerview</p>    <h2>Preview</h2>    <p><img src="https://simg.open-open.com/show/a776cde00fe7edb1666750df085e09fa.gif"></p>    <h2>Demo</h2>    <p><a href="/misc/goto?guid=4959749489729112286" rel="nofollow,noindex">https://hilongjw.github.io/vue-recyclerview/</a></p>    <h2>Requirements</h2>    <p>Vue 2.0 +</p>    <h2>Install</h2>    <pre>  <code class="language-javascript">npm i vue-recyclerview</code></pre>    <pre>  <code class="language-javascript"><script src="https://unpkg.com/vue-recyclerview"></script>></code></pre>    <h2>Usage</h2>    <pre>  <code class="language-javascript"><template>    <div id="app">      <RecyclerView        :prerender="30"         key="mi"         class="recyclerview mi-list"         :fetch="MiFetch"         :item="MiItem"         :tombstone="MiTomstone"      ></RecyclerView>    </div>  </template>    <script>  import Vue from 'vue'  import RecyclerView from 'vue-recyclerview'  import MiItem from './components/MiItem.vue'  import MiTomstone from './components/MiTombstone.vue'    const totalCount = 1000  const MiFetch =  function fetch (count, items) {    count = Math.max(30, count)    return new Promise((resolve, reject) => {      setTimeout(() => {        resolve([ ... mockData])      }, 200)    })    .then(list => {      return {        list: list,        count: totalCount      }    })  }    export default {    name: 'app',    data () {      return {        MiFetch: MiFetch,        MiItem,        MiTomstone      }    },    components: {      RecyclerView: RecyclerView(Vue)    }  </script>  </code></pre>    <h3>item</h3>    <pre>  <code class="language-javascript"><template>      <li class="mi-item">          <a class="version-item">              <div class="version-item-img">                  <img class="lazy" :src="data.img_url">              </div>              <div class="version-item-intro">                  <div class="version-item-name">                      <p>{{data.name}}</p>                  </div>                  <div class="version-item-brief">                      <p>{{ data.product_comment }}</p>                  </div>                  <div class="version-item-intro-price">                      <span>{{ data.price_min }}</span>                  </div>              </div>          </a>      </li>  </template>    <script>  export default {    props: {      data: Object    }  }  </script></code></pre>    <h3>tombstone</h3>    <pre>  <code class="language-javascript"><template>      <li class="mi-item tombstone">          <a class="version-item">              <div class="version-item-img">                  <img class="lazy" src="//i8.mifile.cn/v1/a1/76f98ed9-86c5-dcda-0ba2-b79f62b0f195.webp?width=360&height=360">              </div>              <div class="version-item-intro">                  <div class="version-item-name">                      <p></p>                  </div>                  <div class="version-item-brief">                      <p></p>                  </div>                  <div class="version-item-intro-price">                      <span>00.00</span>                  </div>              </div>          </a>      </li>  </template></code></pre>    <h2>License</h2>    <p><a href="/misc/goto?guid=4959749489819680683" rel="nofollow,noindex">MIT</a></p>    <p>the project inspired by <a href="/misc/goto?guid=4959749489914503986" rel="nofollow,noindex">infinite-scroller</a></p>    <p> </p>