Was ist die Verwendung von React Swipe?

So verwenden Sie React Swipe: 1. Installieren Sie Swiper im React-Projekt über „npm install swiper -s“ 2. Führen Sie „import React,{Component} from ‚react‘…“ ein.

Die Betriebsumgebung dieses Artikels: Windows7-System, React17.0.1, Dell G3.

Was nützt React Swipe?

Swiper in React verwenden

Obwohl viele UI-Frameworks Karussells und Drehtüren haben, können diese unsere Bedürfnisse manchmal nicht erfüllen,
Hier bin ich, ein Neuling, darauf gestoßen Eine Situation, in der die Bild- und Textliste nach links und rechts verschoben werden musste. Nach langer Suche war Swiper für mich geeignet:

Zuerst Swiper im React-Projekt installieren

npm install swiper -s

Ich muss Swiper verwenden. Eingeführt in der Komponente:

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;

Der Effekt ist wie folgt:

Sie können nach links und rechts wischen

Empfohlenes Lernen: „

Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von React Swipe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!