Sima görgetés működés közben React használatával: Útmutató

Preslav Dobrev2022-10-05 · 10 min read

Sima görgetés működés közben React használatával: Útmutató

React egy nyílt forráskódú JavaScript könyvtár, amelyet futurisztikus weboldal-tervek készítésére és a felhasználói felületek fejlesztésére használnak. Robusztusságának, rugalmasságának és hatékonyságának köszönhetően felülmúlta a versenytárs front-end könyvtárakat és keretrendszereket. A React kiváló funkciókat és kiemelkedő szolgáltatásokat kínál, amelyek megkönnyítik a testreszabást és a dinamikus animációt.

Az animációs gyűjtemények listájában a React-ben történő finom görgetés segít a webalkalmazások interaktivitásának növelésében és az animációk egyszerűsítésében. A finom görgetés egy olyan funkció, amely lehetővé teszi a felhasználók számára, hogy egy navigációs sáv segítségével az oldal különböző szakaszaira lépjenek. Ez azt jelenti, hogy ahelyett, hogy egy gombra kattintva azonnal egy ugyanazon oldal másik szakaszára ugranának, a felhasználót egy görgetési animáció vezeti el a célhoz.

Ebben az útmutatóban lépésről lépésre bemutatjuk a finom görgetés megvalósítását React használatával.

Kezdjük el!

Előfeltételek

Az útmutató követéséhez a következőkre lesz szükséged:

Git telepítve a rendszereden.
- Kövesd az alábbiakat a Git telepítéséhez és konfigurálásához Ubuntu 18.04-en
A legújabb verziójú Node.js telepítése szükséges.
- Használd ezt az útmutatót a Node.js telepítéséhez Ubuntu 18.04-en

Az alapbeállítás: A react-scroll telepítése

Ebben a kezdőbarát útmutatóban egy egyszerű alkalmazást fogunk tervezni a react-scroll használatával. Ha már magabiztosan kezeled a React alapjait és szeretnéd továbbfejleszteni a tudásodat a react-scroll funkciókkal kapcsolatban, tekintsd át ezeket az összefoglalt lépéseket.

Először telepítsd a react-scroll csomagot a következő paranccsal:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Ezután importáld a react-scroll csomagot:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Ezt követően szúrd be a <Link /> komponenst, amely az alkalmazás egy adott szakaszát célozza meg:

<Link to="section1">

1	<Link to="section1">

Lépjünk tovább, és tervezzünk egy finom görgetéssel ellátott React alkalmazást.

1. lépés: A React alkalmazás klónozása és futtatása

Útmutatónkban azt a kiinduló React projektet fogjuk használni, amely tartalmaz egy navigációs sávot a tetején. Ott öt egyedi, <sections> egymás után elrendezett szakaszt fogsz látni.

Jelenleg a navigációs sávban lévő linkek horgony (anchor) tagek. Hamarosan azonban frissítenünk kell őket a finom görgetés engedélyezéséhez. Kövesd a React With Smooth Scrolling oldalt a projekt repozitóriumához való navigáláshoz. Fontos megjegyezni, hogy a link a start ágra (branch) mutat. A master ág tartalmazza az összes befejezett módosítást. Az URL megnyitásakor látni fogod a repozitóriumot:

A repozitórium oldalán látni fogod a zöld Code gombot. KATTINTS a legördülő nyílra:

A nyílra kattintva láthatóvá válik a HTTP link:

Most lépj a git terminálodba, és használd a következő parancsot a projekt klónozásához a helyi gépedre:

$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

1	$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

A src/Components könyvtárban találsz egy Navbar.js fájlt, amely tartalmazza a <Navbar> komponenst a nav-items elemekkel, amelyek öt egyedi, egymás után elrendezett <Section> szakasznak felelnek meg:

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
    render() {
    return (
    <nav className="nav" id="navbar">
        <div className="nav-content">
            <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
         />
        <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
        </ul>
    </div>
    </nav>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Logó."

onClick={this.scrollToTop}

<li className="nav-item">1. szekció</li>

<li className="nav-item">2. szekció</li>

<li className="nav-item">3. szekció</li>

<li className="nav-item">4. szekció</li>

<li className="nav-item">5. szekció</li>

</ul>

</div>

</nav>

);

}

Ezután navigáljon az App.js fájlhoz a src könyvtárban. Ott láthatja majd, hogy a <Navbar> az öt <Section>-nel együtt van elhelyezve:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";

class App extends Component {
    render() {
        return (
            <div className="App">
            <Navbar />
            
            <Section
            title="1. szekció"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="2. szekció"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="3. szekció"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="4. szekció"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="5. szekció"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

import React, { Component } from "react";

import logo from "./logo.svg";

import "./App.css";

import Navbar from "./Components/Navbar";

import Section from "./Components/Section";

import dummyText from "./DummyText";

class App extends Component {

render() {

return (

<Section

title="1. szekció"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="2. szekció"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="3. szekció"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="4. szekció"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="5. szekció"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Alapértelmezés szerint minden <Section> komponens tartalmazni fog egy title és subtitle.

DRY elv működés közben

Mivel a bemutatóhoz minta szöveget használunk, adjunk hozzá egy dummyText.js fájlt, hogy időt takarítsunk meg és csökkentsük az ismétlődést. Használja az újonnan létrehozott JavaScript fájlt, hogy átadja azt minden egyes <Section> elemnek.

A React telepítése

Használja a következő parancsot az alkalmazás FUTTATÁSÁHOZ:

cd React-With-Smooth-Scrolling
npm install
npm start

cd React-With-Smooth-Scrolling

npm install

npm start

A rpm futtatása fejlesztői módban indítja el az alkalmazást. Nyissa meg a localhost:3000 címet, és ellenőrizze a rendszerén futó alkalmazást:

Most, hogy az alkalmazásunk fut, lépjünk tovább, és telepítsük a react-scroll csomagot a következő lépésben.

2. lépés: A React-Scroll telepítése és konfigurálása

Először látogasson el a Node Package Manager csomagoldalára, hogy letöltse a react-scroll csomagot. Ezen útmutató írásakor a react-scroll , 1.8.7 legfrissebb verzióját használjuk. Győződjön meg róla, hogy a legújabb verziót szerzi be, ha a jövőben frissítés jelenne meg:

FUTTASSA a következő parancsot a react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Ezt követően nyissa meg a Navbar.js fájlt, és importálja a Link és animateScroll elemeket a react-scroll csomagból. Az egyszerűség és a könnyebb használat érdekében legyen az animateScroll mint scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

Ezután frissítse a nav-elemeket, hogy a <Link> komponenst használják. Számos tulajdonságot fog látni felsorolva a <Link> komponens, amely elhanyagolható a tutorialunk szempontjából. Azonban felfedezheti ezeket a tulajdonságokat a dokumentációs oldal.

Néhány alapvető tulajdonság, amely figyelmet érdemel:

activeClass – Az az osztály, amely akkor van használatban, amikor egy elem aktív.
to – Tájékoztatja a megadott célpontot, hogy hova görgessen.
- A to funkció kulcsfontosságú, mert ez mutatja meg a komponensnek, hogy melyik elemhez görgessen.
spy: Kijelöli a Link elemet, amikor a görgetés a célpozícióban van.
smooth: Animálja a görgetést.
offset: További px értéket görget, például belső margót (padding).
- Használhatja az offset tulajdonságot is, hogy meghatározzon egy extra görgetési mennyiséget egy egyedi <Section>.
duration: Az animált görgetés ideje, amely lehet szám vagy függvény.

Íme egy illusztráció azokról a funkciókról, amelyek minden egyes <Link> komponensnél használhatók. Az egyetlen különbség közöttük a to funkció lesz, mivel mindegyik más <Section>s-re:

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

Fontolja meg az összes nav-elem frissítését.. Miután az összes elemet sikeresen hozzáadta, térjen vissza a böngészőhöz, és nézze meg az élő finom görgetést.

3. lépés: Aktív linkek stílusának beállítása

Ebben a lépésben CSS tulajdonságokat fogunk használni a kódblokkunk újratervezéséhez és stílusossá tételéhez. Az activeClass funkció lehetővé teszi egy osztály körvonalazását és a <Link> komponens alkalmazását, amikor a to elem aktív. Ha az Ön által használt <Link> rendelkezik a to elem nézettel az oldal tetején, tekintse a <Link> elemet aktívnak. Kattintson a <Link> elemre, vagy görgessen le a <Section> manuálisan a <Link>.

Próbáljuk meg tesztelni, és nézzük meg, hogyan működik. Nyissa meg a Chrome DevTools eszközt, és vizsgálja meg az ötödik <Link> elemet az alábbiakban kiemeltek szerint. Kattintson a <Link> elemre, vagy görgessen manuálisan a <Section> elemhez az oldal alsó részén, és megfigyelheti, hogy az aktív osztály alkalmazásra kerül:

További lépésként hozzon létre egy aktív osztályt, és húzza alá a linket. Ezután adja hozzá ezt a kis CSS blokkot az App.css fájlban a src könyvtárban:

.nav-item > .active {
    border-bottom: 1px solid #333;
}

.nav-item > .active {

border-bottom: 1px solid #333;

}

Ezután frissítse a böngészőt. Görgessen egy kicsit, és észre fogja venni, hogy a megadott <Link> most már alá van húzva:

4. lépés: További funkciók hozzáadása

A fent használt tulajdonságokon kívül más funkciók is léteznek, mint például a scrollToTop, scrollToBottom, hogy csak néhányat említsünk, amelyeket használhat. Ezeket a funkciókat közvetlenül is meghívhatja, és explicit módon kezelheti a műveleteiket. Ezen funkciók tekintetében természetesen a navigációs sávban található alkalmazáslogó a kezdőlap tetejére viszi Önt.

A scrollToTop függvény használatával adjon hozzá egy kattintáskezelőt a nav-logo elemhez, hogy a felhasználót visszagörgesse az oldal tetejére:

scrollToTop = () => {
    scroll.scrollToTop();
};

scrollToTop = () => {

scroll.scrollToTop();

};

A scrollToTop függvény használatával adjon hozzá egy kattintáskezelőt a nav-logo elemhez, hogy a felhasználót az oldal aljára görgesse:

scrollToTop = () => {
    scroll.scrollToBottom();
};

scrollToTop = () => {

scroll.scrollToBottom();

};

Visszatérve a böngészőbe, most már legörgethet az oldalon, rákattinthat a navigációs sávban lévő logóra, és visszatérhet az oldal felső részére.

Összegzés

Finom görgetés azon funkciók közé tartozik, amelyek rengeteg vizuális értéket adhatnak egy webalkalmazáshoz. A react-scroll csomag lehetővé teszi, hogy kihasználja ezt a funkciót jelentős többletterhelés nélkül.

A tanulási folyamat következő lépéseként tekintsd meg a további React és JavaScript oktatóanyagokat, amelyeket a mi blogunkon találsz:

Kellemes kódolást!

Preslav Dobrev

Szerző · CloudSigma

Preslav Dobrev a CloudSigma kreatív tervezője, aki hagyományos és innovatív marketingcsatornák segítségével következetes vállalati identitás kialakítására összpontosít. Kiemelkedően képes ötvözni a művészi látásmódot a stratégiai marketinggel, hogy hatásos márkatörténeteket hozzon létre.

Sima görgetés működés közben React használatával: Útmutató

Előfeltételek

Az alapbeállítás: A react-scroll telepítése

1. lépés: A React alkalmazás klónozása és futtatása

2. lépés: A React-Scroll telepítése és konfigurálása

3. lépés: Aktív linkek stílusának beállítása

4. lépés: További funkciók hozzáadása

Összegzés

Preslav Dobrev

Hozzászólások