【Vuejs】quasar framework Virtual Scroll

index.html

<div id="q-app">
  <q-virtual-scroll
                    :items="heavyList"
                    separator
                    >
    <template v-slot="{ item, index }">
      <q-item
              :key="index"
              dense
              >
        <q-item-section>
          <q-item-label>
            #{{ index }} - {{ item.title }} 
            <img :src="item.thumbnailUrl" :alt="item.title">
            </q-item-label>
          </q-item-section>
        </q-item>
    </template>
    </q-virtual-scroll>
</div>

script.babel

axios.get("https://jsonplaceholder.typicode.com/photos").then((response)=>{
  
  new Vue({
    el: '#q-app',
    data () {
      return {
        heavyList:  response.data
      }
    },
    mounted(){
      console.log(this.heavyList)
    }
  }) 
})

scripts

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.15.6/dist/quasar.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar@1.15.6/dist/quasar.min.css" rel="stylesheet" />

vuejs-quasar-framework-virtual-scroll.markdown

【Vuejs】quasar framework Virtual Scroll

A Pen by Edward Lance Lorilla on CodePen.

License.