Μάθετε πώς αυτή η βολική βιβλιοθήκη μπορεί να ενεργοποιήσει μια διεπαφή με δυνατότητα σάρωσης στις εφαρμογές σας με ελάχιστη προσπάθεια.
Καθώς οι κινητές συσκευές γίνονται πιο δημοφιλείς, οι διεπαφές με δυνατότητα σάρωσης έχουν γίνει ένας τυπικός τρόπος αλληλεπίδρασης με εφαρμογές. Οι διεπαφές με δυνατότητα σάρωσης είναι απαραίτητες για την παροχή της καλύτερης εμπειρίας χρήστη στους χρήστες κινητών.
Το Swiper είναι μια ευέλικτη βιβλιοθήκη που σας επιτρέπει να δημιουργείτε διεπαφές με δυνατότητα σάρωσης στις εφαρμογές σας React. Ανακαλύψτε πώς μπορείτε να δημιουργήσετε διεπαφές με δυνατότητα σάρωσης στην εφαρμογή React χρησιμοποιώντας το Swiper.
Εγκατάσταση Swiper
Το Swiper είναι μία από τις πολλές βιβλιοθήκες που μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε την εφαρμογή React. Για να ξεκινήσετε με το Swiper, πρέπει να το εγκαταστήσετε στην εφαρμογή React. Μπορείτε να το κάνετε αυτό με την ακόλουθη εντολή τερματικού που πρέπει να εκτελέσετε στον ριζικό κατάλογο του έργου σας:
npm εγκατάσταση swiper
Αφού εγκαταστήσετε το Swiper, μπορείτε να το χρησιμοποιήσετε στην εφαρμογή σας.
Δημιουργία διεπαφών με δυνατότητα σάρωσης
Αφού εγκαταστήσετε το Swiper στην εφαρμογή React, μπορείτε να δημιουργήσετε διεπαφές με δυνατότητα σάρωσης. Ξεκινήστε με την εισαγωγή του Κλέπτης και SwiperSlide στοιχεία από τη βιβλιοθήκη Swiper.
Το στοιχείο Swiper είναι το βασικό στοιχείο της βιβλιοθήκης Swiper. Καθορίζει τη δομή, τη συμπεριφορά και τη λειτουργικότητα των στοιχείων με δυνατότητα σάρωσης. Το στοιχείο SwiperSlide είναι ένα θυγατρικό στοιχείο του στοιχείου Swiper. Ορίζει μεμονωμένες διαφάνειες που βρίσκονται εντός του στοιχείου Swiper.
Ακολουθεί ένα παράδειγμα διεπαφής με δυνατότητα ολίσθησης που χρησιμοποιεί τα στοιχεία Swiper και SwiperSlide:
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Swiper, SwiperSlide} από"swiper/react";
εισαγωγή'swiper/css';λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (<divόνομα τάξης='στοιχείο'>Στοιχείο 1div></SwiperSlide> <divόνομα τάξης='στοιχείο'>Στοιχείο 2div></SwiperSlide> <divόνομα τάξης='στοιχείο'>Στοιχείο 3div></SwiperSlide> <divόνομα τάξης='στοιχείο'>Στοιχείο 4div></SwiperSlide>
</Swiper>
</div>
)
}
εξαγωγήΠροκαθορισμένο App
Επιπρόσθετα με Κλέπτης και SwiperSlide στοιχεία, αυτό το μπλοκ κώδικα εισάγει το προεπιλεγμένο φύλλο στυλ για το Swiper χρησιμοποιώντας το swiper/css μονάδα μέτρησης.
Στη συνέχεια, το παράδειγμα αναδιπλώνει ένα στοιχείο Swiper γύρω από τέσσερα θυγατρικά στοιχεία SwiperSlide. Κάθε SwiperSlide περιέχει ένα div στοιχείο με το όνομα τάξης Χαρακτηριστικό. Μπορείτε να χρησιμοποιήσετε το className για το στυλ των στοιχείων div:
.στοιχείο {
ενσωματωμένο μέγεθος: 100px;
σύνορα-ακτίνα: 12px;
υλικό παραγεμίσματος: 1rem;
χρώμα: #333333;
χρώμα του φόντου: #e2e2e2;
γραμματοσειρά-οικογένεια: ρέων;
}
Προσαρμογή της διεπαφής σας με δυνατότητα σάρωσης
Αφού δημιουργήσετε με επιτυχία μια διεπαφή με δυνατότητα σάρωσης, μπορείτε να βελτιώσετε την εμφάνιση και τη λειτουργικότητά της ώστε να ταιριάζει στις απαιτήσεις σας.
Με το Swiper, μπορείτε να προσαρμόσετε τη συμπεριφορά και την εμφάνιση της διεπαφής χρησιμοποιώντας διάφορες επιλογές. Περνάτε αυτές τις επιλογές στο Κλέπτης συστατικό ως στηρίγματα στο React:
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { Swiper, SwiperSlide} από"swiper/react";
εισαγωγή'swiper/css';λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
spaceBetween={30}
slidesPerView={2}
βρόχος={ αληθής }
><divόνομα τάξης='στοιχείο'>Στοιχείο 1div></SwiperSlide> <divόνομα τάξης='στοιχείο'>Στοιχείο 2div></SwiperSlide> <divόνομα τάξης='στοιχείο'>Στοιχείο 3div></SwiperSlide> <divόνομα τάξης='στοιχείο'>Στοιχείο 4div></SwiperSlide>
</Swiper>
</div>
)
}
εξαγωγήΠροκαθορισμένο App
Σε αυτό το παράδειγμα, το στοιχείο Swiper περιλαμβάνει τρία στηρίγματα: διάστημα Μεταξύ, slidesPerView, και βρόχος. ο διάστημα Μεταξύ Το prop ορίζει το διάστημα μεταξύ κάθε διαφάνειας, σε αυτήν την περίπτωση 30 pixel.
Χρησιμοποιώντας την slidesPerView prop, μπορείτε να ορίσετε τον αριθμό των διαφανειών που είναι ορατές ταυτόχρονα. Σε αυτή την περίπτωση, το slidesPerView το prop έχει οριστεί στο 2 προκαλώντας το Κλέπτης στοιχείο για την ταυτόχρονη εμφάνιση δύο διαφανειών.
Τέλος, το βρόχος Το prop καθορίζει εάν οι διαφάνειες θα πρέπει να κάνουν βρόχο άπειρα ή όχι. Σε αυτό το παράδειγμα, οι διαφάνειες θα κάνουν βρόχο απεριόριστα επειδή το βρόχος αξία στηρίγματος είναι αληθής.
Διαμόρφωση των διασυνδέσεών σας με δυνατότητα σάρωσης με λειτουργικές μονάδες
Μπορείτε να διαμορφώσετε περαιτέρω τη συμπεριφορά της διεπαφής με δυνατότητα σάρωσης με Ενότητες JavaScript παρέχεται από τη βιβλιοθήκη Swiper. Μερικές από τις ενότητες που παρέχει είναι Πλοήγηση, Αυτόματη αναπαραγωγή, Σελιδοποίηση, και Γραμμή κύλισης.
Για να χρησιμοποιήσετε οποιαδήποτε από αυτές τις λειτουργικές μονάδες στην εφαρμογή σας, πρέπει να τις εισαγάγετε από τη βιβλιοθήκη Swiper. Θα πρέπει επίσης να εισαγάγετε τα αντίστοιχα στυλ CSS για τις ενότητες και να μεταβιβάσετε τα ονόματά τους στο Κλέπτης συστατικό που χρησιμοποιεί το ενότητες στήριγμα.
Για παράδειγμα, έτσι μπορείτε να χρησιμοποιήσετε το Πλοήγηση μονάδα για να διαμορφώσετε τις διασυνδέσεις σας με δυνατότητα σάρωσης:
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Swiper, SwiperSlide } από"swiper/react";
εισαγωγή { Πλοήγηση } από"κλέπτης";
εισαγωγή"swiper/css";
εισαγωγή"swiper/css/navigation";λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
spaceBetween={30}
slidesPerView={2}
modules={[Πλοήγηση]}
βρόχος={αληθής}
πλοήγηση={αληθής}
><divόνομα τάξης="στοιχείο">Στοιχείο 1div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 2div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 3div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 4div></SwiperSlide>
</Swiper>
</div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Αυτό το μπλοκ κώδικα εισάγει το Πλοήγηση μονάδα και το στυλ CSS της, στη συνέχεια καθορίζει τη λειτουργική μονάδα στο ενότητες στήριγμα του Κλέπτης συστατικό. ο ενότητες Το prop ενεργοποιεί και διαμορφώνει τις μονάδες που παρέχονται από τη βιβλιοθήκη Swiper.
Η μονάδα πλοήγησης παρέχει λειτουργικότητα πλοήγησης στο στοιχείο Swiper. Προσθέτει τα κουμπιά προηγούμενου και επόμενου βέλους στα οποία μπορείτε να κάνετε κλικ ή να πατήσετε για να μετακινηθείτε στην προηγούμενη ή την επόμενη διαφάνεια.
ο πλοήγηση Η τιμή prop είναι αληθής, η οποία θα προκαλέσει την εμφάνιση του προηγούμενου και του επόμενου κουμπιού στην οθόνη.
Διαμόρφωση διεπαφών με δυνατότητα σάρωσης με την αυτόματη αναπαραγωγή
ο Αυτόματη αναπαραγωγή Η μονάδα επιτρέπει στο ρυθμιστικό να μεταβαίνει αυτόματα μεταξύ των διαφανειών χωρίς αλληλεπίδραση με τον χρήστη.
Ακολουθεί ένα παράδειγμα για το πώς να διαμορφώσετε τη διεπαφή με δυνατότητα σάρωσης χρησιμοποιώντας το Αυτόματη αναπαραγωγή μονάδα μέτρησης:
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Swiper, SwiperSlide } από"swiper/react";
εισαγωγή { Αυτόματη αναπαραγωγή } από"κλέπτης";
εισαγωγή"swiper/css";
εισαγωγή"swiper/css/autoplay";λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
spaceBetween={30}
slidesPerView={2}
modules={[Αυτόματη αναπαραγωγή]}
βρόχος={αληθής}
αυτόματη αναπαραγωγή={{ καθυστέρηση: 3000 }}
><divόνομα τάξης="στοιχείο">Στοιχείο 1div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 2div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 3div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 4div></SwiperSlide>
</Swiper>
</div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Χρησιμοποιώντας την αυτόματη αναπαραγωγή στήριγμα, μπορείτε να καθορίσετε το καθυστέρηση; σε αυτήν την περίπτωση, έχει οριστεί στα 3000 χιλιοστά του δευτερολέπτου.
Διαμόρφωση διεπαφών με δυνατότητα σάρωσης με σελιδοποίηση
Μια άλλη σημαντική μονάδα Swiper είναι Σελιδοποίηση. ο Σελιδοποίηση Η ενότητα σάς επιτρέπει να προσθέτετε κουκκίδες σελιδοποίησης ή δείκτες γραμμής προόδου στο ρυθμιστικό, δίνοντας στους χρήστες μια οπτική αναπαράσταση του αριθμού των διαφανειών και της τρέχουσας θέσης τους μέσα στο ρυθμιστικό.
Για να χρησιμοποιήσετε το Σελιδοποίηση ενότητα, πρέπει να το εισαγάγετε και να το συμπεριλάβετε στο ενότητες στήριγμα του Κλέπτης συστατικό:
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή { Swiper, SwiperSlide } από"swiper/react";
εισαγωγή { Σελιδοποίηση } από"κλέπτης";
εισαγωγή"swiper/css";
εισαγωγή"swiper/css/pagination";λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
spaceBetween={30}
slidesPerView={2}
modules={[Σελίδα]}
βρόχος={αληθής}
σελιδοποίηση={{ με δυνατότητα κλικ: αληθής }}
><divόνομα τάξης="στοιχείο">Στοιχείο 1div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 2div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 3div></SwiperSlide> <divόνομα τάξης="στοιχείο">Στοιχείο 4div></SwiperSlide>
</Swiper>
</div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Αυτό το μπλοκ κώδικα παρέχει τη λειτουργία σελιδοποίησης με το Σελιδοποίηση μονάδα μέτρησης. Επιτρέπει επίσης στους χρήστες να κάνουν κλικ στο σελιδοποίηση σφαίρες ρυθμίζοντας το με δυνατότητα κλικ ιδιοκτησία του σελιδοποίηση στήριγμα στο αληθινό.
Εκτός από τη βιβλιοθήκη Swiper σελιδοποίηση μονάδα μέτρησης, αντιδρώ-σελιδοποιώ είναι μια άλλη εξαιρετική επιλογή για τη δημιουργία σελιδοποίησης στην εφαρμογή React.
Δημιουργία προσβάσιμων εφαρμογών με το React
Οι διεπαφές με δυνατότητα σάρωσης βελτιώνουν την εμπειρία χρήστη της εφαρμογής σας για χρήστες με οθόνη αφής. Το Swiper προσφέρει μεγάλη ευελιξία και μπορείτε εύκολα να το προσαρμόσετε σύμφωνα με τις ανάγκες της εφαρμογής σας.
Διάφορες βιβλιοθήκες διεπαφής χρήστη μπορούν να σας βοηθήσουν να κάνετε τις εφαρμογές σας React πιο προσιτές. Αυτές οι βιβλιοθήκες παρέχουν δυνατότητες και λειτουργίες που βελτιώνουν την εμπειρία χρήστη της εφαρμογής σας.
