如何使用滚动时加载的 Quasar 页面创建答案

【问题标题】：How to create with Quasar page that load while scroling如何使用滚动时加载的 Quasar 页面创建
【发布时间】：2021-06-26 18:48:20
【问题描述】：

我尝试创建在滚动页面时呈现更多元素的组件。我在 vue 中使用 Quasar 框架。这是渲染包含来自 json 文件的信息的单个块所需的代码

https://quasar.dev/vue-components/infinite-scroll

Quasar 已内置 infinite-scroll 组件，但在这些示例中，它们仅添加要渲染的空元素。就我而言，我需要从对象按顺序渲染元素。我已经尝试在v-for 中添加q-infinite-scroll 组件，但这在大多数情况下会创建一个无限循环

有人可以向我解释如何调整这个示例来渲染更复杂的对象吗？

    <div v-for="(p,k) in returnProductsBySelectedType()" class='caption' :key="p.name">
                  <q-card class="my-card" flat bordered v-if="p.name !== undefined">
                    <q-item class="" >
                      <q-item-section >
                        <div class="text-body1 q-mt-sm q-mb-xs" >{{ p.name }}</div>
                      </q-item-section>
                      <q-btn flat class="bg-primary" style="width:50px; height: 50px;" color="white" :icon='includeProduct(p,k) ? "remove" : "add"' @click=' includeProduct(p) ?  removeProducts(p) : addProductToList(p)' :key="k"></q-btn>
                    </q-item>
                    <q-separator />
                    <q-item-section class="q-pa-sm bg-grey-3">
                      <div class="text-subtitle2 flex ">Kalorie: (Kcal) Tłuszcze: (g) Weglowodany: (g) Bialko: (g)</div>
                    </q-item-section>
                  </q-card>
                </div>

data(){
  return{
     products:json,
     dropdownType:'zboża'
  }
},
methods:{
returnProductsBySelectedType(){
     let arr=[]
     for(const {type,products} of this.products){ 
       if(this.dropdownType === type ) return products
       if(this.dropdownType === 'wszystko') arr.push(...products)
     }
     return arr
   },
}

Json 文件

[
   {
      "type":"zboża",
      "products":[
         {
            "id":1,
            "name":"Bagietki francuskie"
         },
         {
            "id":2,
            "name":"Bułeczki do hot-dogów"
         },
         {
            "id":3,
            "name":"Bułka tarta"
         },
         {
            "id":4,
            "name":"Bułki grahamki"
         },
         {
            "id":5,
            "name":"Bułki i rogale maślane"
         },
         {
            "id":6,
            "name":"Bułki mieszane, z cebulą"
         },
         {
            "id":7,
            "name":"Bułki mleczne"
         },
         {
            "id":8,
            "name":"Bułki owsiane"
         },
         {
            "id":9,
            "name":"Bułki pszenne zwykłe"
         },
         {
            "id":10,
            "name":"Bułki pszenne zwykłe, z serwatką"
         },
         {
            "id":11,
            "name":"Bułki sojowe"
         },
         {
            "id":12,
            "name":"Bułki szwedki"
         },
         {
            "id":13,
            "name":"Bułki wrocławskie"
         },
         {
            "id":14,
            "name":"Chałki zdobne"
         },
         {
            "id":15,
            "name":"Chleb baltonowski"
         },
         {
            "id":16,
            "name":"Chleb beskidzki"
         },
         {
            "id":17,
            "name":"Chleb chrupki"
         },
      ]
   }
]

【问题讨论】：

标签： javascript vue.js quasar

【解决方案1】：

查看无限滚动组件 APi：https://next.quasar.dev/vue-components/infinite-scroll#qinfinitescroll-api

您需要侦听当组件需要更多数据时触发的@load 事件。在那里您可以从 JSON 文件中注入更多数据。

【讨论】：