J'ai configuré mon projet dans le style des cartes amadou Je voudrais que les utilisateurs puissent faire glisser les cartes et faire glisser la carte afin que la carte suivante dans le tableau puisse être ajoutée au mais j'aimerais aussi que cela boucle infiniment à travers le tableau avec une limite maximale de 3 cartes affichées à la fois. Jusqu'à présent, j'ai essayé d'utiliser les fonctions d'épissure et de tranche, ici et j'essaie d'itérer à travers des sections du tableau 3 à la fois, mais cela ne semble pas fonctionner quelles sont les suggestions?

C'est le code reactjs que j'ai écrit jusqu'à présent:

import React, { useState, useEffect } from 'react';
import Data from '../Data/webApps_data';
import TinderCard from 'react-tinder-card';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
import ReactPlayer from 'react-player/youtube'

function Webapps() {

    let [cardController_end, setCardController_end] = useState(3);
    let [cardController_start, setCardController_start] = useState(0);

    const onCardLeftScreen = (Project_card) => {
        console.log(Project_card + ' left the screen')
        setCardController_end(cardController_end < Data.length ? cardController_end + 1 : 0)
        setCardController_start(cardController_start < Data.length ? cardController_start + 1 : 0)
    }

    return (
        <div className='cardStyles'>
                {Data.slice(cardController_start, cardController_end).map((Projects, index) => {
                    return <TinderCard key={Projects.workName} onCardLeftScreen={() => onCardLeftScreen(Projects.workName)} className='Cards'>
                        <Carousel>
                            {Projects.Images && Projects.Images.map((Image, index) => { return <div key={Image} className='image-iframeContainer'><img alt='Images of web apps' src={require("../assets/Port-images/Web-Apps/" + Image)} /></div> })}
                            {Projects.videoAddress && Projects.videoAddress.map((Video, index) => { return <div key={Video} className='image-iframeContainer'><ReactPlayer url={Video} muted={false} controls={false} onPlay={autoplayChange} onPause={autoplayChange} onEnded={autoplayChange} /></div> })}
                        </Carousel>
                        {Projects.webAddress && <div className='webButton'><LinkIcon onClick={() => { window.open(Projects.webAddress); }} /></div>}
                        <h1>{Projects.workName}</h1>
                        {Projects.workTech.map((Tech, index) => { return <p key={Tech} className='techList'>{Tech}</p> })}
                        <div className='descriptionContainer'>
                            <p className='description' >{Projects.workDescription}</p>
                        </div>
                    </TinderCard>
                })}
        </div >
    )
}

export default Webapps;

Voici un exemple du tableau JSON utilisé:

//Webs and apps component data
export default[

    {
        workName: 'The life of ACD',
        workDescription: 'This was developed while working for the Arthur Conan Doyle foundation based in Portsmouth. Its is a maps base app which shows the life events of Arthur Conan Doyle(Author of the Sherlock Holmes books) within portsmouth.',
        workTech: ['React.js, HTML, Sass, OpenStreetMap API, node.js'],
        videoAddress: ['https://www.youtube.com/watch?v=lV9Hv05uB54'],
        webAddress: 'https://arthur-conan.netlify.app/Map',
        Images: ['ACD1.jpg', 'ACD2.jpg', 'ACD3.jpg', 'ACD4.jpg']
    },

    {
        workName: 'HistoryLens',
        workDescription: 'HistoryLens is an educational history web site taking inspiration from sites such as BBC history. It was developed with a friend as part of a group project at university.',
        workTech: ['Bootstrap, PHP, Css, Javascript'],
        videoAddress: ['https://www.youtube.com/watch?v=oUimrYIhxLA'],
        webAddress: '',
        Images: ['History1.png', 'History2.png', 'History3.png', 'History4.png', 'History5.png']
    },

    {

        workName: 'Simplyfit',
        workDescription: 'Simplyfit is a mobile app developed with the intention of helping people create tailor made meal plans. The app was developed for my final year project at university.',
        workTech: ['React.js, HTML, Sass, Material-ui, Firebase, Firestore, node.js'],
        videoAddress: ['https://www.youtube.com/watch?v=-zuxYPJrlmw'],
        webAddress: 'https://simplyfit.netlify.app/',
        Images: ['Simplyfit1.jpg', 'Simplyfit2.jpg', 'Simplyfit3.jpg', 'Simplyfit4.jpg', 'Simplyfit5.jpg']
    },

    {
        workName: 'Dirty Pint',
        workDescription: 'Dirty Pint is a fun drinking game where players can enter in a drink of their choice and disgusting mixer is displayed along with a pun.',
        workTech: ['PhoneGapp, HTML, Css, Bootstrap, Javascript'],
        videoAddress: ['https://www.youtube.com/watch?v=TLEVkopN1Xk'],
        webAddress: '',
        Images: ['Dirty1.jpg', 'Dirty2.jpg', 'Dirty3.jpg', 'Dirty4.jpg']
    },

]

Edit: J'ai également ajouté du Sass qui signifie que chaque élément du tableau imprimé a -1 z-index de la carte précédente avant de penser que je dirais au cas où cela causerait de la confusion.

Modifier à l'aide de la fonction de file d'attente javascript

let [cardQueue, setCardQueue] = useState([Data[0], Data[1], Data[2]]);
let [cardQueueLength, setCardQueueLength] = useState(2)

const onCardLeftScreen = (Project_card) => {
    console.log(Project_card + ' left the screen');
    cardQueue.shift();
    setCardQueueLength(cardQueueLength < Data.length ? cardQueueLength + 1 : 0)
    cardQueue.push(Data[cardQueueLength]);

}


return (
    <div className='cardStyles'>
            {cardQueue.map((Projects, index) => {
                return <TinderCard key={Projects.workName} preventSwipe={['up', 'down']} onCardLeftScreen={() => onCardLeftScreen(Projects.workName)} className='Cards'>
                    <Carousel>
                        {Projects.Images && Projects.Images.map((Image, index) => { return <div key={Image} className='image-iframeContainer'><img alt='Images of web apps' src={require("../assets/Port-images/Web-Apps/" + Image)} /></div> })}
                        {Projects.videoAddress && Projects.videoAddress.map((Video, index) => { return <div key={Video} className='image-iframeContainer'><ReactPlayer url={Video} muted={false} controls={false} onPlay={autoplayChange} onPause={autoplayChange} onEnded={autoplayChange} /></div> })}
                    </Carousel>
                    {Projects.webAddress && <div className='webButton'><LinkIcon onClick={() => { window.open(Projects.webAddress); }} /></div>}
                    <h1>{Projects.workName}</h1>
                    {Projects.workTech.map((Tech, index) => { return <p key={Tech} className='techList'>{Tech}</p> })}
                    <div className='descriptionContainer'>
                        <p className='description' >{Projects.workDescription}</p>
                    </div>
                </TinderCard>
            })}
        </div>
)
}

export default Webapps;

Cela ne fonctionne pas mais il me semble que la meilleure approche est mon implémentation de la file d'attente correcte? J'ai essayé de pousser en utilisant le crochet «set» en vain?

nouveau fil La difficulté à comprendre pourquoi cela ne fonctionne pas a créé un nouveau fil de discussion traitant des problèmes liés au push and shift.

0
lukeet 25 sept. 2020 à 16:11

2 réponses

Meilleure réponse

Vous devez créer une file d'attente des éléments, puis les paginer en conséquence. Voici un article que j'ai utilisé par exemple pour créer une file d'attente.

Comment implémentez-vous une pile et une file d'attente en JavaScript?

1
billy_comic 25 sept. 2020 à 13:17

En fonction de l'index, vous pouvez renvoyer l'élément que vous souhaitez afficher ou simplement null.

let maxDisplay = 5;
youArray.map((row, index) => {
   if(index < maxDisplay){
     return <div>...</div>
   }else{
     return null
   }
});

Attention: n'utilisez pas les résultats pour d'autres choses que l'affichage, car vous aurez un tableau avec des valeurs "nulles".

-1
Heretic Monkey 25 sept. 2020 à 14:15