如何用react写轮播？

前提：

安装好Node.js安装。【推荐阅读：nodejs怎么下载安装？】

步骤：

1、安装swiper

使用node包管理器npm来安装swiper

npm install swiper --save

2、在轮播组件里引入swiper

//引入此路径，才不会打包失败
import Swiper from 'swiper/dist/js/swiper.js';
//引入样式，还可以加上自己的样式
import 'swiper/dist/css/swiper.min.css';

3、在组件挂在完毕的时候，生成Swiper对象，在生命周期钩子函数componentDidMount()中写入轮播方法

componentDidMount(){
    //可以加上你需要的条件等，然后生成Swiper对象，
    //一定要检查是不是每次都生成了Swiper对象，否则可能出现不滑动的情况和别的情况等
    new Swiper('.swiper-container',{
        loop: true, //这里是自动轮播
    
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',//这里是分页器设置
        },
    
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
    
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
    });
}

4、在render中渲染dom

（1）如果数据是根据异步加载完成那么我们需要通过数组遍历：

render() {
    return (
        <div className="App">
            <div className="swiper-container">
                <div className="swiper-wrapper">
                {
                    this.state.carouselr.map((item,index)=>{
                        return(
                                <div className="swiper-slide" key={index}>
                                    <img src={item.picUrl}/>
                                </div>
                        )
                    })
                }
        </div>
        <div className='swiper-pagination'></div>
            </div>
        </div>
        );
}

（2）如果是直接在render中渲染那么代码如下：

render() {
    return (
        <div className="Hello">
            <div className="swiper-container">
            <div className="swiper-wrapper">
                <div className="swiper-slide">Slide 1</div>
                <div className="swiper-slide">Slide 2</div>
                <div className="swiper-slide">Slide 3</div>
            </div>
                <!-- 如果需要分页器 -->
                <div className='swiper-pagination'></div>
                
                <!-- 如果需要导航按钮 -->            
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                                
                <!-- 如果需要滚动条 -->            
                 <div class="swiper-scrollbar">
            </div>
        </div>
    );
}

参考文档

swiper4.x 官方文档

更多React相关技术文章，请访问 React答疑 栏目进行学习！！

以上就是如何用react写轮播？的详细内容，更多请关注易知道|edz.cc其它相关文章！