Płynne przewijanie w akcji przy użyciu React: Samouczek

Preslav Dobrev2022-10-05 · 10 min read

Płynne przewijanie w akcji przy użyciu React: Samouczek

React to otwartoźródłowa biblioteka JavaScript służąca do budowania futurystycznych projektów stron internetowych i ulepszania interfejsów użytkownika. Ze względu na swoją solidność, elastyczność i wydajność wyprzedziła konkurencyjne biblioteki i frameworki front-endowe. React zapewnia doskonałe funkcje i wyróżniające się funkcjonalności, które ułatwiają dostosowywanie i dynamiczną animację.

Na liście kolekcji animacji płynne przewijanie (smooth scrolling) w React pomaga zwiększyć interaktywność aplikacji internetowych i usprawnić animację. Płynne przewijanie to funkcja, która pozwala użytkownikom przechodzić do różnych sekcji strony za pomocą paska nawigacyjnego. Oznacza to, że zamiast naciskać przycisk i natychmiast przenosić się do innej sekcji tej samej strony, użytkownik jest kierowany do celu za pomocą animacji przewijania.

W tym poradniku przeprowadzimy Cię przez kroki wdrażania płynnego przewijania przy użyciu React.

Zaczynajmy!

Wymagania wstępne

Aby móc śledzić ten samouczek, będziesz potrzebować:

Git zainstalowanego w swoim systemie.
- Postępuj zgodnie z instrukcjami, aby zainstalować i skonfigurować Git na Ubuntu 18.04
Najnowsza wersja Node.js musi być zainstalowana.
- Skorzystaj z tego samouczka, aby zainstalować Node.js na Ubuntu 18.04

Podstawowa konfiguracja: Instalacja react-scroll

W tym przyjaznym dla początkujących poradniku zaprojektujemy prostą aplikację przy użyciu react-scroll. Jeśli czujesz się swobodnie z podstawami React i chcesz poszerzyć swoją wiedzę na temat react-scroll funkcji, zapoznaj się z tymi podsumowanymi krokami.

Najpierw zainstaluj react-scroll za pomocą następującego polecenia:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Następnie zaimportuj pakiet react-scroll:

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

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

Następnie wstaw komponent <Link />, który będzie kierował do określonej sekcji aplikacji:

<Link to="section1">

1	<Link to="section1">

Przejdźmy dalej i zaprojektujmy aplikację React z płynnym przewijaniem.

Krok 1: Sklonuj i uruchom aplikację React

W naszym poradniku będziemy korzystać z startowego projektu React, który zawiera pasek nawigacyjny na górze. Zobaczysz tam pięć unikalnych <sections> ułożonych sekwencyjnie.

Obecnie linki w pasku nawigacyjnym to znaczniki kotwicy. Będziemy jednak musieli je wkrótce zaktualizować, aby włączyć płynne przewijanie. Przejdź na stronę React With Smooth Scrolling, aby przejść do repozytorium projektu. Należy pamiętać, że link prowadzi do gałęzi start. Gałąź master zawiera wszystkie ukończone zmiany. Po otwarciu adresu URL zobaczysz repozytorium:

Na stronie repozytorium zobaczysz przycisk Code w kolorze zielonym. NACIŚNIJ strzałkę rozwijanego menu:

Po kliknięciu strzałki zobaczysz link HTTP link:

Teraz przejdź do swojego terminala git i użyj następującego polecenia, aby sklonować projekt na swoim lokalnym komputerze:

$ 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

W katalogu src/Components znajdziesz plik Navbar.js, który zawiera komponent <Navbar> z elementami nav-items odpowiadającymi pięciu unikalnym <Section> ułożonym sekwencyjnie:

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="Logo."

onClick={this.scrollToTop}

<li className="nav-item">Sekcja 1</li>

<li className="nav-item">Sekcja 2</li>

<li className="nav-item">Sekcja 3</li>

<li className="nav-item">Sekcja 4</li>

<li className="nav-item">Sekcja 5</li>

</ul>

</div>

</nav>

);

}

Następnie przejdź do pliku App.js w katalogu src. Zobaczysz tam, że <Navbar> jest umieszczony wraz z pięcioma <Section>ami:

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="Sekcja 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

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

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

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

            <Section
            title="Sekcja 5"
            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="Sekcja 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sekcja 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sekcja 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sekcja 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sekcja 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Domyślnie każdy komponent <Section> będzie zawierać title oraz subtitle.

DRY – zasada w praktyce

Ponieważ w naszym samouczku używamy przykładowego tekstu, dodajmy plik dummyText.js, aby zaoszczędzić czas i uniknąć powtórzeń. Użyj nowo utworzonego pliku JavaScript, aby przekazać go do każdego elementu <Section> .

Zainstaluj React

Użyj następującego polecenia, aby URUCHOMIĆ aplikację:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Uruchomienie rpm uruchomi aplikację w trybie deweloperskim. Przejdź do localhost:3000 i sprawdź działanie aplikacji w swoim systemie:

Teraz, gdy nasza aplikacja działa, przejdźmy dalej i zainstalujmy react-scroll w kolejnym kroku.

Krok 2: Instalacja i konfiguracja React-Scroll

Najpierw musisz odwiedzić stronę pakietu w Node Package Manager, aby pobrać react-scroll . W momencie pisania tego poradnika używamy najnowszej wersji react-scroll , 1.8.7. Upewnij się, że pobierasz najnowszą wersję, jeśli w przyszłości pojawi się aktualizacja:

URUCHOM następujące polecenie, aby zainstalować react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Następnie przejdź do pliku Navbar.js i zaimportuj Link oraz animateScroll z react-scroll. Dla uproszczenia i łatwości użycia, zachowajmy animateScroll jako scroll:

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

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

Następnie zaktualizuj nav-items, aby używały komponentu <Link>. Zobaczysz wiele właściwości wymienionych w <Link> komponent, który jest mało istotny dla naszego samouczka. Możesz jednak zapoznać się z tymi właściwościami, sprawdzając stronę dokumentacji.

Kilka istotnych właściwości, które zasługują na Twoją uwagę:

activeClass – Klasa używana, gdy element jest aktywny.
to – Informuje o określonym celu, do którego należy przewinąć.
- Właściwość to jest kluczowa, ponieważ wskazuje komponentowi, do którego elementu ma przewinąć.
spy: Służy do zaznaczenia Link, gdy przewijanie znajduje się w pozycji docelowej.
smooth: Animuje przewijanie.
offset: Przewija o dodatkowe px, na przykład jako dopełnienie (padding).
- Możesz również użyć offset do zdefiniowania dodatkowej odległości przewijania, aby dotrzeć do poszczególnego <Section>.
duration: Czas animacji przewijania, który może być liczbą lub funkcją.

Oto ilustracja funkcji, które mogą być użyte dla każdego komponentu <Link>. Jedyną rzeczą, która je wyróżnia, będzie właściwość to, ponieważ wszystkie wskazują na różne <Section>y:

<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}

Rozważ zaktualizowanie wszystkich elementów nav-items. Po pomyślnym dodaniu wszystkich elementów wróć do przeglądarki i zobacz płynne przewijanie na żywo.

Step 3: Style Active Links

In this step, we’ll be using CSS properties to redesign our code block and make it look stylish. The activeClass feature enables you to outline a class and apply the <Link> component when the to element is active. If the <Link> you are using has the to element view at the top of the page, consider the <Link> as active. Click the <Link> or scroll down the <Section> manually to trigger the <Link>.

Let’s try testing and check out how it works. Open up the Chrome DevTools and inspect the fifth <Link> as highlighted below. Click on the <Link> or manually scroll the <Section> to the lower part of the page, and you will observe the active class getting applied:

As an additional step, create an active class and underline the link. Then, add this small block of CSS in the App.css file in the src directory:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

After that, refresh your browser. Scroll around a bit and you will notice the specified <Link> is now underlined:

Step 4: Add More Functions

In addition to the properties used above, there are other functionalities like scrollToTop, scrollToBottom, to name a few, that you can use. You can call these functions directly and manage their actions explicitly. With respect to these functionalities, naturally, the app logo in a navigation bar will take you to the top of the home page.

Using the scrollToTop function, add a click handler to the nav-logo for scrolling the user back to the top of the page:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Using the scrollToTop function, add a click handler to the nav-logo for scrolling the user at the bottom of the page:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Back in the browser, you can now scroll down on the page, click the logo in the navigation bar, and be returned to the upper part of the page.

Conclusion

Smooth scrolling is among those functionalities that can add plenty of visual value to a web app. The react-scroll package can enable you to leverage this feature without the momentous overhead.

W ramach kolejnego kroku w nauce zapoznaj się z kolejnymi samouczkami dotyczącymi React i JavaScript, które znajdziesz na naszym blogu:

Miłego kodowania!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Płynne przewijanie w akcji przy użyciu React: Samouczek

Wymagania wstępne

Podstawowa konfiguracja: Instalacja react-scroll

Krok 1: Sklonuj i uruchom aplikację React

Krok 2: Instalacja i konfiguracja React-Scroll

Step 3: Style Active Links

Step 4: Add More Functions

Conclusion

Preslav Dobrev

Komentarze