react中swipe怎么用

這篇文章主要介紹了react中swipe怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

react swipe的使用方法：1、通過“npm install swiper -s”在react項(xiàng)目中安裝swiper；2、引入“import React,{Component} from 'react'...”即可。

本文操作環(huán)境：Windows7系統(tǒng)、react17.0.1、Dell G3。

React中使用swiper

雖然用ui框架有很多是有輪播圖，走馬燈的，但是有時候我們的需求是這些都無法滿足的，
在這里我這個菜鳥遇到了要求圖文列表可以左右滑動的情況，找了很久還是swiper適合我
下面展示一下我的用法：

首先，react項(xiàng)目中安裝swiper

npm install swiper -s

然后再需要用到swiper的組件中引入：

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 className='new'>
                <p className="swiper-container">
                    <p className="swiper-wrapper">
                    </p>
                </p>
            </p>           
        )
    }
}

export default New;

效果是這樣的：

可以左右滑動

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“react中swipe怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!