反応スワイプの使用法とは何ですか?

react swipe の使用方法: 1. 「npm install swiper -s」を通じて反応プロジェクトにスワイパーをインストールします; 2. 「import React,{Component} from 'react'...」を導入します。

この記事の動作環境: Windows7 システム、react17.0.1、Dell G3。

react でのスワイプの使用法は何ですか?

React でのスワイパーの使用

多くの UI フレームワークにはカルーセルがありますが、は回転ドアですが、それだけではニーズを満たせない場合があります。
初心者の私は、写真とテキストのリストを左右にスライドさせる必要がある状況に遭遇しました。長い間探した結果、スワイパーが適していました
以下に私の使用方法を示します:

まず、react プロジェクトにスワイパーをインストールします

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 中国語 Web サイトの他の関連記事を参照してください。