Qu'est-ce que l'utilisation du glisser-réagir ?

Comment utiliser React Swipe : 1. Installez swiper dans le projet React via "npm install swiper -s" ; 2. Introduisez "import React,{Component} from 'react'...".

L'environnement d'exploitation de cet article : système Windows7, React17.0.1, Dell G3.

À quoi sert React Swipe ?

Utiliser swiper dans React

Bien que de nombreux frameworks d'interface utilisateur aient des carrousels et des portes tournantes, parfois nos besoins ne peuvent pas être satisfaits par ceux-ci,
Dans Ici, j'ai rencontré un débutant. une situation qui obligeait la liste d'images et de textes à glisser vers la gauche et la droite. Après une longue recherche, swiper me convenait. Voici mon utilisation :

Tout d'abord, installez swiper dans le projet React

npm install swiper -s

et ensuite. J'ai besoin d'utiliser swiper. Introduit dans le composant :

import React,{Component} from 'react'
import './new.css'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

class New extends Component{
    constructor(props){
        super(props);
        this.state={
            newlist:[0,1,2,3,4,5,6]
        }
    }
    componentDidMount() {
        new Swiper('.swiper-container', {
            slidesPerView: 3,
            centeredSlides: true,
            virtual: {
                slides:this.state.newlist,
            }
        })
    }
    render(){
        return(
            <p>
                </p><p>
                    </p><p>
                    </p>
                
                       
        )
    }
}

export default New;

L'effet est comme ceci :

Vous pouvez glisser vers la gauche et la droite

Apprentissage recommandé : "

tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!