Update rewards and CreatorNewSummary, Now you are able to use the mouse wheel.
This commit is contained in:
PascalMarchesseault
157
src/views/creators/banner/CreatorNewsSummary.vue
Normal file
157
src/views/creators/banner/CreatorNewsSummary.vue
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<div class="overflow-hidden relative" @wheel="handleScroll">
|
||||||
|
<div class="text-center text-white rounded-t-lg mb-1 py-1"
|
||||||
|
:style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">
|
||||||
|
Actualité
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Container that holds all the posts and allows dynamic scrolling -->
|
||||||
|
<div class="relative max-h-[1000px] overflow-hidden">
|
||||||
|
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
|
||||||
|
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white"
|
||||||
|
:style="{ backgroundColor: creator.colors.bannerTop }">
|
||||||
|
<div class="flex justify-between items-center border-b-2 border-white p-3 mx-2">
|
||||||
|
<p v-if="item.type === 'nouvelle'" class="text-xl" :style="{ letterSpacing: '8px' }">Nouvelle</p>
|
||||||
|
<p v-if="item.type === 'contenu'" class="text-xl" :style="{ letterSpacing: '8px' }">Contenu</p>
|
||||||
|
<p class="text-xs">{{ item.date }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3">
|
||||||
|
<div class="text-lg" style="letter-spacing: 2px">{{ item.title }}</div>
|
||||||
|
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
|
||||||
|
|
||||||
|
<div v-if="item.rating" class="stars flex justify-end">
|
||||||
|
{{ item.rating }} ★
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img v-if="item.photo" :src="item.photo" class="w-full h-auto my-2"/>
|
||||||
|
|
||||||
|
<div class="flex justify-evenly">
|
||||||
|
<v-btn icon variant="plain">
|
||||||
|
<v-icon>mdi-thumb-up</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn icon variant="plain">
|
||||||
|
<v-icon>mdi-comment-outline</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn icon variant="plain">
|
||||||
|
<v-icon>mdi-gift-outline</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
<video v-if="item.video" controls :src="item.video" class="w-full h-auto my-2"></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation Buttons directly below the content -->
|
||||||
|
<div class="flex justify-center mt-2 space-x-2" v-if="showNavigationButtons">
|
||||||
|
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
|
||||||
|
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
|
||||||
|
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, defineProps } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
creator: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const actualites = ref([
|
||||||
|
{
|
||||||
|
type: 'nouvelle',
|
||||||
|
title: 'La visite du studio',
|
||||||
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||||
|
photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
|
||||||
|
video: null,
|
||||||
|
rating: null,
|
||||||
|
date: '2024-09-19'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'contenu',
|
||||||
|
title: 'Éditer comme un pro!',
|
||||||
|
description: 'Ceci est la description du contenu.',
|
||||||
|
photo: null,
|
||||||
|
video: null,
|
||||||
|
rating: 4.5,
|
||||||
|
date: '2024-09-18'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'nouvelle',
|
||||||
|
title: 'Le studio',
|
||||||
|
description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
|
||||||
|
photo: null,
|
||||||
|
video: null,
|
||||||
|
rating: null,
|
||||||
|
date: '2024-09-17'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'contenu',
|
||||||
|
title: 'Contenu 2',
|
||||||
|
description: 'Deuxième contenu avec description.',
|
||||||
|
photo: null,
|
||||||
|
video: null,
|
||||||
|
rating: 5.0,
|
||||||
|
date: '2024-09-16'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'nouvelle',
|
||||||
|
title: 'La 2e visite du studio',
|
||||||
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||||
|
photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
|
||||||
|
video: null,
|
||||||
|
rating: null,
|
||||||
|
date: '2024-09-19'
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const startIndex = ref(0);
|
||||||
|
const cardsPerPage = 3;
|
||||||
|
|
||||||
|
// Gestion de la position du scroll
|
||||||
|
const scrollPosition = ref(0);
|
||||||
|
const cardHeight = 250; // Hauteur approximative d'une carte en pixels
|
||||||
|
|
||||||
|
// Calculer l'index final
|
||||||
|
const endIndex = computed(() => startIndex.value + cardsPerPage);
|
||||||
|
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
|
||||||
|
|
||||||
|
// Calculer si les boutons doivent être affichés
|
||||||
|
const showNavigationButtons = computed(() => {
|
||||||
|
const totalHeight = actualites.value.length * cardHeight;
|
||||||
|
const containerHeight = cardsPerPage * cardHeight;
|
||||||
|
return totalHeight > containerHeight; // Afficher les boutons seulement si le contenu dépasse la hauteur du conteneur
|
||||||
|
});
|
||||||
|
|
||||||
|
function scrollDown() {
|
||||||
|
if (endIndex.value < actualites.value.length) {
|
||||||
|
startIndex.value += 1; // Défiler d'une carte à la fois
|
||||||
|
scrollPosition.value += cardHeight; // Augmenter la position de défilement
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollUp() {
|
||||||
|
if (startIndex.value > 0) {
|
||||||
|
startIndex.value -= 1; // Défiler d'une carte à la fois
|
||||||
|
scrollPosition.value -= cardHeight; // Diminuer la position de défilement
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle scroll wheel event to scroll up or down
|
||||||
|
function handleScroll(event) {
|
||||||
|
event.preventDefault(); // Empêche le défilement de la page
|
||||||
|
if (event.deltaY < 0) {
|
||||||
|
scrollUp(); // Défilement vers le haut
|
||||||
|
} else if (event.deltaY > 0) {
|
||||||
|
scrollDown(); // Défilement vers le bas
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="overflow-hidden relative">
|
|
||||||
|
|
||||||
<div class="flex justify-center mt-2 py-2">
|
|
||||||
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
|
|
||||||
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center text-white rounded-t-lg mb-1 py-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Actualité</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Container that holds all the posts and allows dynamic scrolling -->
|
|
||||||
<div class="relative max-h-[1000px] overflow-hidden">
|
|
||||||
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
|
|
||||||
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white" :style="{ backgroundColor: creator.colors.bannerTop }">
|
|
||||||
<div class="flex justify-between items-center border-b-2 border-white p-3 mx-2">
|
|
||||||
<p v-if="item.type === 'nouvelle'" class="text-xl" :style="{ letterSpacing: '8px' }">Nouvelle</p>
|
|
||||||
<p v-if="item.type === 'contenu'" class="text-xl" :style="{ letterSpacing: '8px' }">Contenu</p>
|
|
||||||
<p class="text-xs">{{ item.date }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-3">
|
|
||||||
<div class="text-lg" style="letter-spacing: 2px">{{ item.title }}</div>
|
|
||||||
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
|
|
||||||
|
|
||||||
<div v-if="item.rating" class="stars flex justify-end">
|
|
||||||
{{ item.rating }} ★
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<img v-if="item.photo" :src="item.photo" class="w-full h-auto my-2" />
|
|
||||||
|
|
||||||
<div class="flex justify-evenly">
|
|
||||||
<v-btn icon variant="plain"><v-icon>mdi-thumb-up</v-icon></v-btn>
|
|
||||||
<v-btn icon variant="plain"><v-icon>mdi-comment-outline</v-icon></v-btn>
|
|
||||||
<v-btn icon variant="plain"><v-icon>mdi-gift-outline</v-icon></v-btn>
|
|
||||||
</div>
|
|
||||||
<video v-if="item.video" controls :src="item.video" class="w-full h-auto my-2"></video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Navigation Buttons directly below the content -->
|
|
||||||
<div class="flex justify-center mt-2 space-x-2">
|
|
||||||
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
|
|
||||||
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.card-enter-active, .card-leave-active {
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
.card-enter-from, .card-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
.card-leave-from, .card-enter-to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ajout de overflow-y pour rendre la publication suivante partiellement visible */
|
|
||||||
.max-h-[1000px] {
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, defineProps } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
creator: {
|
|
||||||
type: Object,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const actualites = ref([
|
|
||||||
{ type: 'nouvelle', title: 'La visite du studio', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', video: null, rating: null, date: '2024-09-19' },
|
|
||||||
{ type: 'contenu', title: 'Éditer comme un pro!', description: 'Ceci est la description du contenu.', photo: null, video: null, rating: 4.5, date: '2024-09-18' },
|
|
||||||
{ type: 'nouvelle', title: 'Le studio', description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.', photo: null, video: null, rating: null, date: '2024-09-17' },
|
|
||||||
{ type: 'contenu', title: 'Contenu 2', description: 'Deuxième contenu avec description.', photo: null, video: null, rating: 5.0, date: '2024-09-16' },
|
|
||||||
{ type: 'nouvelle', title: 'La 2e visite du studio', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png', video: null, rating: null, date: '2024-09-19' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const startIndex = ref(0);
|
|
||||||
const cardsPerPage = 3;
|
|
||||||
|
|
||||||
// Gestion de la position du scroll
|
|
||||||
const scrollPosition = ref(0);
|
|
||||||
const cardHeight = 250; // Hauteur approximative d'une carte en pixels
|
|
||||||
|
|
||||||
const endIndex = computed(() => startIndex.value + cardsPerPage);
|
|
||||||
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
|
|
||||||
|
|
||||||
function scrollDown() {
|
|
||||||
if (endIndex.value < actualites.value.length) {
|
|
||||||
startIndex.value += 1; // Défiler d'une carte à la fois
|
|
||||||
scrollPosition.value += cardHeight; // Augmenter la position de défilement
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollUp() {
|
|
||||||
if (startIndex.value > 0) {
|
|
||||||
startIndex.value -= 1; // Défiler d'une carte à la fois
|
|
||||||
scrollPosition.value -= cardHeight; // Diminuer la position de défilement
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,40 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="overflow-hidden relative">
|
<div class="overflow-hidden relative" @wheel="handleScroll">
|
||||||
|
|
||||||
<div class="flex justify-center mt-2 py-2">
|
|
||||||
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
|
|
||||||
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center text-white rounded-t-lg py-1 mb-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Récompenses</div>
|
<div class="text-center text-white rounded-t-lg py-1 mb-1" :style="{ backgroundColor: creator.colors.bannerTop, letterSpacing: '5px' }">Récompenses</div>
|
||||||
|
|
||||||
<!-- Container that holds all the posts and allows dynamic scrolling -->
|
<!-- Container that holds all the posts and allows dynamic scrolling -->
|
||||||
<div class="relative h-[1000px] max-h-[1000px] overflow-hidden">
|
<div class="relative h-[1000px] max-h-[1000px] overflow-hidden">
|
||||||
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
|
<div class="transition-transform duration-500" :style="{ transform: `translateY(-${scrollPosition}px)` }">
|
||||||
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white" :style="{ backgroundColor: creator.colors.bannerTop }">
|
<div v-for="(item, index) in actualites" :key="index" class="my-1 text-white p-4" :style="{ backgroundColor: creator.colors.bannerTop }">
|
||||||
<div class="flex justify-center items-center border-b-2 border-white p-3 mx-2">
|
<div class="flex justify-center items-center border-b-2 border-white p-3 mx-2">
|
||||||
<div class="text-xl align-center" style="letter-spacing: 4px">{{ item.title }}</div>
|
<div class="text-xl align-center" style="letter-spacing: 4px">{{ item.title }}</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
|
|
||||||
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
|
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">{{ item.description }}</p>
|
||||||
|
|
||||||
<div v-if="item.amount" class="text-right text-lg text-green-500">
|
<div v-if="item.amount" class="flex flex-row justify-end space-x-2">
|
||||||
{{ item.amount }}$
|
<div class="text-right text-white">{{ item.amount }}$</div>
|
||||||
|
<div>|</div>
|
||||||
|
<div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.quantity" class="text-right text-sm text-gray-400">
|
|
||||||
Quantité: {{ item.quantity }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navigation Buttons directly below the content -->
|
<!-- Navigation Buttons directly below the content -->
|
||||||
<div class="flex justify-center mt-2 space-x-2">
|
<div v-if="showNavigationButtons" class="flex justify-center mt-2 py-2">
|
||||||
|
<v-btn variant="text" class="text-white" height="42" @click="scrollUp">
|
||||||
|
<v-icon size="40">mdi-arrow-up-drop-circle-outline</v-icon>
|
||||||
|
</v-btn>
|
||||||
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
|
<v-btn variant="text" class="text-white" height="42" @click="scrollDown">
|
||||||
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
|
<v-icon size="40">mdi-arrow-down-drop-circle-outline</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
@@ -53,34 +47,89 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const actualites = ref([
|
const actualites = ref([
|
||||||
{title: 'Hoodie', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 50, quantity: 5, date: '2024-09-19' },
|
{
|
||||||
{title: 'Small Talk', description: 'Ceci est la description du contenu.', amount: null, quantity: null, date: '2024-09-18' },
|
title: 'Hoodie',
|
||||||
{title: 'Les vrais choses', description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.', amount: 100, quantity: 10, date: '2024-09-17' },
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||||
{title: 'On va changer le monde', description: 'Deuxième contenu avec description.', amount: null, quantity: null, date: '2024-09-16' },
|
amount: 50,
|
||||||
{title: 'Séance photo', description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.', amount: 150, quantity: 20, date: '2024-09-19' },
|
quantity: 5,
|
||||||
|
date: '2024-09-19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Small Talk',
|
||||||
|
description: 'Ceci est la description du contenu.',
|
||||||
|
amount: null,
|
||||||
|
quantity: null,
|
||||||
|
date: '2024-09-18',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Les vrais choses',
|
||||||
|
description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
|
||||||
|
amount: 100,
|
||||||
|
quantity: 10,
|
||||||
|
date: '2024-09-17',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'On va changer le monde',
|
||||||
|
description: 'Deuxième contenu avec description.',
|
||||||
|
amount: 150,
|
||||||
|
quantity: 1,
|
||||||
|
date: '2024-09-16',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Séance photo',
|
||||||
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||||
|
amount: 150,
|
||||||
|
quantity: 20,
|
||||||
|
date: '2024-09-19',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Séance photo',
|
||||||
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
||||||
|
amount: 150,
|
||||||
|
quantity: 20,
|
||||||
|
date: '2024-09-19',
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const startIndex = ref(0);
|
const startIndex = ref(0);
|
||||||
const cardsPerPage = 3;
|
const cardsPerPage = 3;
|
||||||
|
|
||||||
// Gestion de la position du scroll
|
|
||||||
const scrollPosition = ref(0);
|
const scrollPosition = ref(0);
|
||||||
const cardHeight = 250; // Hauteur approximative d'une carte en pixels
|
const cardHeight = 250;
|
||||||
|
|
||||||
const endIndex = computed(() => startIndex.value + cardsPerPage);
|
const endIndex = computed(() => startIndex.value + cardsPerPage);
|
||||||
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
|
const visibleCards = computed(() => actualites.value.slice(startIndex.value, endIndex.value));
|
||||||
|
|
||||||
function scrollDown() {
|
// Calculate whether navigation buttons should be shown
|
||||||
if (endIndex.value < actualites.value.length) {
|
const showNavigationButtons = computed(() => {
|
||||||
startIndex.value += 1; // Défiler d'une carte à la fois
|
const totalHeight = actualites.value.length * cardHeight;
|
||||||
scrollPosition.value += cardHeight; // Augmenter la position de défilement
|
const containerHeight = cardsPerPage * cardHeight;
|
||||||
}
|
return totalHeight > containerHeight; // Only show buttons if content exceeds the container
|
||||||
}
|
});
|
||||||
|
|
||||||
function scrollUp() {
|
function scrollUp() {
|
||||||
if (startIndex.value > 0) {
|
if (startIndex.value > 0) {
|
||||||
startIndex.value -= 1; // Défiler d'une carte à la fois
|
startIndex.value -= 1;
|
||||||
scrollPosition.value -= cardHeight; // Diminuer la position de défilement
|
scrollPosition.value -= cardHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollDown() {
|
||||||
|
const totalHeight = actualites.value.length * cardHeight;
|
||||||
|
const containerHeight = cardsPerPage * cardHeight;
|
||||||
|
|
||||||
|
if (scrollPosition.value + containerHeight < totalHeight) {
|
||||||
|
startIndex.value += 1;
|
||||||
|
scrollPosition.value += cardHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle scroll wheel event to scroll up or down
|
||||||
|
function handleScroll(event) {
|
||||||
|
event.preventDefault(); // Empêche le défilement de la page
|
||||||
|
if (event.deltaY < 0) {
|
||||||
|
scrollUp(); // Défilement vers le haut
|
||||||
|
} else if (event.deltaY > 0) {
|
||||||
|
scrollDown(); // Défilement vers le bas
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user