feat: infinity scroll, load more, resore scroll

This commit is contained in:
Nikita Kiselev
2025-07-23 13:26:22 +03:00
parent 6a14ad0a74
commit bb2ee38118
9 changed files with 188 additions and 106 deletions

View File

@@ -1,24 +1,11 @@
<template>
<div ref="goodsRef">
<CategoriesInline/>
<ProductsList
:products="productsStore.homeProducts.data"
:meta="productsStore.homeProducts.meta"
:isLoading="productsStore.isLoading"
/>
<ProductsList/>
</div>
</template>
<script setup>
import {ref} from "vue";
import ProductsList from "@/components/ProductsList.vue";
import CategoriesInline from "../components/CategoriesInline.vue";
import {useProductsStore} from "@/stores/ProductsStore.js";
const productsStore = useProductsStore();
const goodsRef = ref();
function scrollToProducts() {
goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
}
</script>

View File

@@ -1,22 +1,9 @@
<template>
<div ref="goodsRef">
<ProductsList
:products="productsStore.products.data"
:meta="productsStore.products.meta"
:isLoading="productsStore.isLoading"
/>
<ProductsList/>
</div>
</template>
<script setup>
import {useProductsStore} from "@/stores/ProductsStore.js";
import ProductsList from "@/components/ProductsList.vue";
import {onMounted} from "vue";
import {useRoute} from "vue-router";
const route = useRoute();
const categoryId = route.params.id ?? null;
const productsStore = useProductsStore();
onMounted(() => productsStore.fetchProducts(categoryId))
</script>