반응 스와이프 사용법이란 무엇입니까?

react swipe 사용 방법: 1. "npm install swiper -s"를 통해 React 프로젝트에 swiper를 설치합니다. 2. "import React,{Component} from 'react'..."를 소개합니다.

이 기사의 운영 환경: Windows7 시스템, React17.0.1, Dell G3.

react swipe의 사용법은 무엇인가요?

React에서 swiper 사용

많은 UI 프레임워크에 회전문과 회전문이 있지만 때로는 이러한 기능이 우리의 요구 사항을 충족할 수 없습니다.
여기서 초보자인 저는 만났습니다. 그림과 텍스트 목록을 좌우로 슬라이드해야 하는 상황. 오랜 시간 동안 검색한 결과 swiper가 저에게 적합했습니다. 제 사용법은 다음과 같습니다.

먼저 반응 프로젝트에 swiper를 설치하세요

npm install swiper -s

. 스와이퍼를 사용해야 합니다. 컴포넌트에 도입됨:

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;

효과는 다음과 같습니다:

왼쪽 및 오른쪽으로 슬라이드할 수 있습니다.

추천 학습: "

react 비디오 튜토리얼"

위 내용은 반응 스와이프 사용법이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!