fix: infinte scroll

This commit is contained in:
Vlad Stan 2023-07-12 17:26:07 +03:00
parent ca46a8f7f3
commit 8e2bc8bb92
2 changed files with 4 additions and 4 deletions

View file

@ -25,7 +25,7 @@
<q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img> <q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img>
</q-banner> </q-banner>
<q-infinite-scroll @load="onLoad" :offset="250"> <q-infinite-scroll v-if="showProducts" @load="onLoad" :offset="250">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in partialProducts" :key="idx"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in partialProducts" :key="idx">
<product-card :product="item" @change-page="changePageM"></product-card> <product-card :product="item" @change-page="changePageM"></product-card>

View file

@ -20,7 +20,7 @@ async function customerMarket(path) {
search: null, search: null,
partialProducts: [], partialProducts: [],
filteredProducts: [], filteredProducts: [],
productsPerPage: 24, productsPerPage: 12,
startIndex: 0, startIndex: 0,
lastProductIndex: 0, lastProductIndex: 0,
showProducts: true, showProducts: true,
@ -41,7 +41,7 @@ async function customerMarket(path) {
this.partialProducts = [] this.partialProducts = []
if (searchText.length < 3) { if (searchText.length < 3) {
this.filteredProducts = [...this.products] this.filteredProducts = [...this.products]
this.lastProductIndex = Math.min(this.filteredProducts.length, 24) this.lastProductIndex = Math.min(this.filteredProducts.length, this.productsPerPage)
this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex)) this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
setTimeout(() => this.showProducts = true, 0) setTimeout(() => this.showProducts = true, 0)
return return
@ -58,7 +58,7 @@ async function customerMarket(path) {
) )
}) })
this.startIndex = 0 this.startIndex = 0
this.lastProductIndex = Math.min(this.filteredProducts.length, 24) this.lastProductIndex = Math.min(this.filteredProducts.length, this.productsPerPage)
this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex)) this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
setTimeout(() => { this.showProducts = true }, 0) setTimeout(() => { this.showProducts = true }, 0)