Implementieren Sie eine horizontale Kartenrolle in React

1. Reagieren Sie auf horizontale Scroll-Karten
2. Die Liste der Karten in der Schriftrolle

Es ist technisch möglich, alles nur mit Vanilla JavaScript zu erstellen. Frameworks wie React fügen der zentralen JavaScript-Sprache eine Struktur hinzu, die Ihnen hilft, Webanwendungen einfach zu erstellen.

React hat auch eine große Community von Entwicklern, die benutzerdefinierte Komponenten erstellen und sie mit allen teilen.

Entwickler in der React-Community haben viele Pakete erstellt, mit denen Sie fast alle Funktionen hinzufügen können, die Sie möglicherweise in einer React-App benötigen. Sie können diese benutzerdefinierten Komponenten verwenden, ohne zu verstehen, wie sie funktionieren.

In diesem Artikel wird die Erstellung eines Karussells aus horizontal scrollbaren Karten in React erläutert.

Reagieren Sie auf horizontale Scroll-Karten

Sie können eine benutzerdefinierte React-Komponente für horizontal scrollbare Karten erstellen. Es wird jedoch zu viel Zeit in Anspruch nehmen und möglicherweise nicht so gut funktionieren wie vorgefertigte Pakete.

In diesem Artikel verwenden wir das Paket react-spring-3d-carousel.

Wir müssen die benutzerdefinierte Carousel-Komponente aus dem react-spring-3d-carousel-Paket importieren. Dank dieser Komponente ist die Implementierung horizontaler Scrollkarten sehr einfach.

Sie müssen lediglich eine Liste der im Karussell angezeigten DOM-Elemente bereitstellen.

Schauen wir uns ein Beispiel an.

import "./styles.css";
import React, { Component } from "react";
import Carousel from "react-spring-3d-carousel";
import SampleCard from "./card";
import { config } from "react-spring";
class ExampleCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      changeSlide: ""
    };
  }
  slides = [
    {
      key: 1,
      content: <SampleCard />
    },
    {
      key: 2,
      content: <SampleCard />
    },
    {
      key: 3,
      content: <SampleCard />
    },
    {
      key: 4,
      content: <SampleCard />
    },
    {
      key: 5,
      content: <SampleCard />
    },
    {
      key: 6,
      content: <SampleCard />
    },
    {
      key: 7,
      content: <SampleCard />
    },
    {
      key: 8,
      content: <SampleCard />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
  });

  render() {
    return (
      <div style={{ width: "40%", height: "500px", margin: "0 auto" }}>
        <Carousel
          slides={this.slides}
          changeSlide={this.state.changeSlide}
          offsetRadius="10"
          animationConfig={config.gentle}
          showNavigation
        />
      </div>
    );
  }
}
export default ExampleCarousel;

Hier haben wir eine Liste (Array) von Karten. Jedes Objekt in der Liste hat zwei Eigenschaften: Schlüssel und Inhalt.

Werte der Eigenschaft Schlüssel müssen eindeutig sein. Der Wert der Eigenschaft Inhalt wird im Karussell angezeigt.

Dann wenden wir die Methode .map() an, um den Event-Handler onClick() für jede Karte im Karussell festzulegen. Die Methode .map() generiert ein neues Array von Objekten, das wir in der Variablen slides speichern.

Wir werden auf diese Liste verweisen, um ein Karussell in JSX anzuzeigen.

<Carousel
  slides={this.slides}
  changeSlide={this.state.changeSlide}
  animationConfig={config.gentle}
  showNavigation
/>

Zuerst setzen wir das Attribut slides auf das Array von Objekten. Wir setzen auch den changeSlide auf den aktuellen Index der aktuell fokussierten Karte.

Wir setzen auch das Attribut animationConfig auf einen reibungslosen Übergang. Dies ist nur möglich, weil wir das Modul config aus dem Paket react-spring importiert haben.

Die Liste der Karten in der Schriftrolle

Schauen wir uns die Liste der Karten an, die in der Eigenschaft slides gespeichert sind.

slides = [
    {
      key: 1,
      content: <SampleCard />
    },
    {
      key: 2,
      content: <SampleCard />
    },
    {
      key: 3,
      content: <SampleCard />
    },
    {
      key: 4,
      content: <SampleCard />
    },
    {
      key: 5,
      content: <SampleCard />
    },
    {
      key: 6,
      content: <SampleCard />
    },
    {
      key: 7,
      content: <SampleCard />
    },
    {
      key: 8,
      content: <SampleCard />
    }
  ].map((slide, index) => {
    return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
  });

Jedes Objekt in der Folienliste hat eine content-Eigenschaft, die einen Wert der <SampleCard />-Komponente hat. Das Karussell erstellt eine horizontale Bildlaufleiste mit Inhalten, die wir hier angeben.

Sie können beispielsweise ein quadratisches <div>-Element angeben, und das Karussell zeigt es an.

Sie können auch verschiedene Komponenten für die Eigenschaft Inhalt jedes Objekts im Array festlegen, und das Karussell zeigt verschiedene Karten an. In diesem Fall setzen wir eine <SampleCard />-Komponente auf alle Objekte im Array.

Wir können der Komponente auch Requisiten übergeben, um ihr Verhalten, ihre Funktionalität und ihr Aussehen anzupassen. Lesen Sie offizielle React-Dokumentation, um mehr über mögliche Anwendungsfälle für Requisiten zu erfahren.

Schauen wir uns den Code der Komponente <SampleCard> an.

const imageUrl =
    'https://play-lh.googleusercontent.com/yPtnkXQAn6yEahOurxuYZL576FDXWn3CqewVcEWJsXlega_nSiavBvmaXwfTGktGlQ';
export default class SampleCard extends React.Component {
  render = () => {
    return (
      <div>
        <img src={imageUrl} height='150' width='150'></img>
        <h1>Card title</h1>
      </div>
    );
  };
}

Wenn Sie diese Live-Demo auf CodeSandbox öffnen, sehen Sie jeweils eine horizontale Schriftrolle dieser Karten. Die Struktur dieser Karten ist ziemlich einfach – wir haben ein Bild und einen <h1>-Text.

Das Bild ist nur ein Beispiel dafür, wie ein Kartenbild aussehen würde. Sie können die Variable imageUrl durch einen Link zu einem beliebigen anderen Bild ersetzen, und Sie werden die Änderungen sehen.

Fügen Sie Elemente und Stile zum Hauptcontainer <div> hinzu, der von der Komponente SampleCard zurückgegeben wird, um eine komplexere Karte zu erstellen.