Ομαλή Κύλιση σε Δράση Χρησιμοποιώντας το React: Ένας Οδηγός

Preslav Dobrev2022-10-05 · 11 min read

Ομαλή Κύλιση σε Δράση Χρησιμοποιώντας το React: Ένας Οδηγός

React είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που χρησιμοποιείται για τη δημιουργία φουτουριστικών σχεδίων ιστοτόπων και τη βελτίωση των διεπαφών χρήστη. Λόγω της στιβαρότητας, της ευελιξίας και της αποτελεσματικότητάς της, έχει ξεπεράσει τις ανταγωνιστικές βιβλιοθήκες και πλαίσια front-end. Η React παρέχει εξαιρετικά χαρακτηριστικά και ξεχωριστές λειτουργίες που διευκολύνουν την προσαρμογή και τη δυναμική κίνηση.

Στη λίστα των συλλογών κίνησης, η ομαλή κύλιση στη React βοηθά στην αύξηση της διαδραστικότητας των εφαρμογών ιστού και στην απλοποίηση της κίνησης. Η ομαλή κύλιση είναι μια δυνατότητα που επιτρέπει στους χρήστες να μεταβαίνουν σε διαφορετικά τμήματα της σελίδας χρησιμοποιώντας μια γραμμή πλοήγησης. Αυτό σημαίνει ότι, αντί να πατήσει ένα κουμπί και να μεταφερθεί αμέσως σε ένα διαφορετικό τμήμα της ίδιας σελίδας, ο χρήστης κατευθύνεται σε έναν στόχο μέσω μιας κίνησης κύλισης.

Σε αυτόν τον οδηγό, θα σας καθοδηγήσουμε στα βήματα υλοποίησης της ομαλής κύλισης χρησιμοποιώντας τη React.

Ας ξεκινήσουμε!

Προαπαιτούμενα

Για να παρακολουθήσετε αυτό το σεμινάριο, θα χρειαστείτε τα εξής:

Git εγκατεστημένο στο σύστημά σας.
- Ακολουθήστε τα βήματα για να εγκαταστήσετε και να ρυθμίσετε το Git στο Ubuntu 18.04
Η τελευταία έκδοση του Node.js πρέπει να είναι εγκατεστημένη.
- Χρησιμοποιήστε αυτό το σεμινάριο για να εγκαταστήσετε το Node.js στο Ubuntu 18.04

Η βασική εγκατάσταση: Εγκατάσταση του react-scroll

Σε αυτόν τον φιλικό προς τους αρχάριους οδηγό, θα σχεδιάσουμε μια απλή εφαρμογή χρησιμοποιώντας react-scroll. Εάν είστε εξοικειωμένοι με τα βασικά στοιχεία της React και ανυπομονείτε να αναβαθμίσετε τις γνώσεις σας σχετικά με τις λειτουργίες react-scroll, ανατρέξτε σε αυτά τα συνοπτικά βήματα.

Αρχικά, εγκαταστήστε το react-scroll χρησιμοποιώντας την ακόλουθη εντολή:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Στη συνέχεια, εισαγάγετε το πακέτο react-scroll:

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

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

Μετά από αυτό, εισαγάγετε το στοιχείο <Link /> που θα στοχεύει σε ένα συγκεκριμένο τμήμα της εφαρμογής:

<Link to="section1">

1	<Link to="section1">

Ας προχωρήσουμε και ας σχεδιάσουμε μια εφαρμογή React με ομαλή κύλιση.

Βήμα 1: Κλωνοποίηση και εκτέλεση της εφαρμογής React

Στον οδηγό μας, θα χρησιμοποιήσουμε το αρχικό έργο React που περιλαμβάνει μια γραμμή πλοήγησης στο επάνω μέρος. Εκεί θα δείτε πέντε μοναδικά <sections> διατεταγμένα διαδοχικά.

Προς το παρόν, οι σύνδεσμοι στη γραμμή πλοήγησης είναι ετικέτες αγκύρωσης. Ωστόσο, θα χρειαστεί να τους ενημερώσουμε σύντομα για να ενεργοποιήσουμε την ομαλή κύλιση. Ακολουθήστε τη σελίδα React With Smooth Scrolling για να μεταβείτε στο αποθετήριο του έργου. Είναι σημαντικό να σημειωθεί ότι ο σύνδεσμος αφορά τον κλάδο start. Ο κλάδος master περιλαμβάνει όλες τις ολοκληρωμένες τροποποιήσεις. Ανοίγοντας τη διεύθυνση URL, θα δείτε το αποθετήριο:

Στη σελίδα του αποθετηρίου, θα δείτε το κουμπί Code με πράσινο χρώμα. ΠΑΤΗΣΤΕ το βέλος του αναπτυσσόμενου μενού:

Κάνοντας κλικ στο βέλος, θα δείτε τον σύνδεσμο HTTP link:

Τώρα μεταβείτε στο τερματικό git σας και χρησιμοποιήστε την ακόλουθη εντολή για να κλωνοποιήσετε το έργο στον τοπικό σας υπολογιστή:

$ 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

Στον κατάλογο src/Components, θα βρείτε ένα αρχείο Navbar.js που περιλαμβάνει το <Navbar> με nav-items που αντιστοιχούν σε πέντε μοναδικά <Section> διατεταγμένα διαδοχικά:

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="Λογότυπο."

onClick={this.scrollToTop}

<li className="nav-item">Ενότητα 1</li>

<li className="nav-item">Ενότητα 2</li>

<li className="nav-item">Ενότητα 3</li>

<li className="nav-item">Ενότητα 4</li>

<li className="nav-item">Ενότητα 5</li>

</ul>

</div>

</nav>

);

}

Στη συνέχεια, μεταβείτε στο App.js αρχείο στον κατάλογο src. Εκεί, θα δείτε ότι το <Navbar> είναι τοποθετημένο μαζί με τα πέντε <Section>s:

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

            <Section
            title="Ενότητα 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Ενότητα 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Ενότητα 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Ενότητα 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="Ενότητα 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Ενότητα 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Ενότητα 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Ενότητα 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Ενότητα 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Από προεπιλογή, κάθε <Section> component θα περιλαμβάνει ένα title και subtitle.

DRY Αρχή στην Πράξη

Καθώς χρησιμοποιούμε εικονικό κείμενο για τον οδηγό μας, ας προσθέσουμε ένα dummyText.js αρχείο για να εξοικονομήσουμε χρόνο και να μειώσουμε την επανάληψη. Χρησιμοποιήστε το πρόσφατα δημιουργημένο JavaScript αρχείο για να το περάσετε σε κάθε <Section> στοιχείο.

Εγκατάσταση του React

Χρησιμοποιήστε την ακόλουθη εντολή για να ΕΚΤΕΛΕΣΕΤΕ την εφαρμογή:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Η εκτέλεση του rpm θα ξεκινήσει την εφαρμογή σας σε λειτουργία ανάπτυξης. Μεταβείτε στο localhost:3000 και επαληθεύστε ότι η εφαρμογή εκτελείται στο σύστημά σας:

Τώρα που η εφαρμογή μας εκτελείται, ας προχωρήσουμε και ας εγκαταστήσουμε το react-scroll στο επόμενο βήμα.

Βήμα 2: Εγκατάσταση και Ρύθμιση του React-Scroll

Αρχικά, πρέπει να επισκεφθείτε το πακέτο στο Node Package Manager για να κατεβάσετε το react-scroll . Κατά τη συγγραφή αυτού του οδηγού, χρησιμοποιούμε την πιο πρόσφατη έκδοση του react-scroll , 1.8.7. Βεβαιωθείτε ότι θα λάβετε την τελευταία έκδοση, εάν υπάρξει ενημέρωση στο μέλλον:

ΕΚΤΕΛΕΣΤΕ την ακόλουθη εντολή για να εγκαταστήσετε το react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Μετά από αυτό, μεταβείτε στο αρχείο Navbar.js και εισαγάγετε τα Link και animateScroll από το react-scroll. Για απλότητα και ευκολία στη χρήση, ας κρατήσουμε το animateScroll ως scroll:

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

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

Μετά από αυτό, ενημερώστε τα nav-items για να χρησιμοποιήσετε το <Link> component. Θα δείτε πολλές ιδιότητες να αναφέρονται στο <Link> στοιχείο που είναι δευτερεύουσας σημασίας για τον οδηγό μας. Ωστόσο, μπορείτε να εξερευνήσετε αυτές τις ιδιότητες ελέγχοντας τη σελίδα τεκμηρίωσης.

Ορισμένες βασικές ιδιότητες που αξίζουν την προσοχή σας:

activeClass – Η κλάση που χρησιμοποιείται όταν ένα στοιχείο είναι ενεργό.
to – Ενημερώνει τον καθορισμένο στόχο για κύλιση σε αυτόν.
- Η ιδιότητα to είναι κρίσιμη επειδή κατευθύνει το στοιχείο σε ποιο στοιχείο να κάνει κύλιση.
spy: Επιλέγει το Link όταν η κύλιση βρίσκεται στη θέση-στόχο.
smooth: Δημιουργεί εφέ κίνησης στην κύλιση.
offset: Κάνει κύλιση επιπλέον px όπως για παράδειγμα padding.
- Μπορείτε επίσης να χρησιμοποιήσετε το offset για να ορίσετε μια επιπλέον απόσταση κύλισης για να φτάσετε σε ένα μεμονωμένο <Section>.
duration: Ο χρόνος κίνησης της κύλισης, ο οποίος μπορεί να είναι αριθμός ή συνάρτηση.

Ακολουθεί μια απεικόνιση των δυνατοτήτων που μπορούν να χρησιμοποιηθούν για κάθε στοιχείο <Link>. Το μόνο διακριτικό στοιχείο μεταξύ τους θα είναι η ιδιότητα to, καθώς όλες δείχνουν σε διαφορετικά <Section>s:

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

Σκεφτείτε να ενημερώσετε όλα τα nav-items. Αφού προστεθούν επιτυχώς όλα τα στοιχεία, επιστρέψτε στο πρόγραμμα περιήγησης και δείτε τη ζωντανή ομαλή κύλιση.

Βήμα 3: Μορφοποίηση Ενεργών Συνδέσμων

Σε αυτό το βήμα, θα χρησιμοποιήσουμε ιδιότητες CSS για να επανασχεδιάσουμε το μπλοκ κώδικά μας και να το κάνουμε να φαίνεται κομψό. Η ιδιότητα activeClass σάς επιτρέπει να ορίσετε μια κλάση και να την εφαρμόσετε στο στοιχείο <Link> όταν το στοιχείο to είναι ενεργό. Εάν το <Link> που χρησιμοποιείτε έχει το στοιχείο to ορατό στο επάνω μέρος της σελίδας, θεωρήστε το <Link> ως ενεργό. Κάντε κλικ στο <Link> ή κάντε κύλιση προς τα κάτω στο <Section> χειροκίνητα για να ενεργοποιήσετε το <Link>.

Ας δοκιμάσουμε να το ελέγξουμε για να δούμε πώς λειτουργεί. Ανοίξτε τα Chrome DevTools και επιθεωρήστε το πέμπτο <Link> όπως επισημαίνεται παρακάτω. Κάντε κλικ στο <Link> ή κάντε χειροκίνητα κύλιση στο <Section> στο κάτω μέρος της σελίδας, και θα παρατηρήσετε ότι εφαρμόζεται η ενεργή κλάση:

Ως πρόσθετο βήμα, δημιουργήστε μια ενεργή κλάση και υπογραμμίστε τον σύνδεσμο. Στη συνέχεια, προσθέστε αυτό το μικρό μπλοκ κώδικα CSS στο αρχείο App.css στον κατάλογο src directory:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Μετά από αυτό, ανανεώστε το πρόγραμμα περιήγησής σας. Κάντε λίγη κύλιση και θα παρατηρήσετε ότι το καθορισμένο <Link> είναι πλέον υπογραμμισμένο:

Βήμα 4: Προσθήκη Περισσότερων Λειτουργιών

Εκτός από τις ιδιότητες που χρησιμοποιήθηκαν παραπάνω, υπάρχουν και άλλες λειτουργίες όπως η scrollToTop, scrollToBottom, για να αναφέρουμε μερικές, τις οποίες μπορείτε να χρησιμοποιήσετε. Μπορείτε να καλέσετε αυτές τις συναρτήσεις απευθείας και να διαχειριστείτε τις ενέργειές τους ρητά. Όσον αφορά αυτές τις λειτουργίες, φυσικά, το λογότυπο της εφαρμογής σε μια γραμμή πλοήγησης θα σας μεταφέρει στην κορυφή της αρχικής σελίδας.

Χρησιμοποιώντας τη συνάρτηση scrollToTop, προσθέστε έναν χειριστή κλικ στο nav-logo για να επαναφέρετε τον χρήστη με κύλιση στην κορυφή της σελίδας:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Χρησιμοποιώντας τη συνάρτηση scrollToTop, προσθέστε έναν χειριστή κλικ στο nav-logo για να μεταφέρετε τον χρήστη με κύλιση στο κάτω μέρος της σελίδας:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Πίσω στο πρόγραμμα περιήγησης, μπορείτε τώρα να κάνετε κύλιση προς τα κάτω στη σελίδα, να κάνετε κλικ στο λογότυπο στη γραμμή πλοήγησης και να επιστρέψετε στο επάνω μέρος της σελίδας.

Συμπέρασμα

Ομαλή κύλιση είναι μεταξύ εκείνων των λειτουργιών που μπορούν να προσθέσουν μεγάλη οπτική αξία σε μια διαδικτυακή εφαρμογή. Το πακέτο react-scroll μπορεί να σας επιτρέψει να αξιοποιήσετε αυτή τη δυνατότητα χωρίς σημαντική επιβάρυνση.

Ως το επόμενο βήμα στη μαθησιακή σας εμπειρία, ρίξτε μια ματιά σε περισσότερα tutorials React και JavaScript που μπορείτε να βρείτε στο δικό μας blog:

Καλό προγραμματισμό!

Preslav Dobrev

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.

Ομαλή Κύλιση σε Δράση Χρησιμοποιώντας το React: Ένας Οδηγός

Προαπαιτούμενα

Η βασική εγκατάσταση: Εγκατάσταση του react-scroll

Βήμα 1: Κλωνοποίηση και εκτέλεση της εφαρμογής React

Βήμα 2: Εγκατάσταση και Ρύθμιση του React-Scroll

Βήμα 3: Μορφοποίηση Ενεργών Συνδέσμων

Βήμα 4: Προσθήκη Περισσότερων Λειτουργιών

Συμπέρασμα

Preslav Dobrev

Σχόλια