React 轮播图之二菜单栏左右滑动特效(swiper.js)

2019独角兽企业重金招聘Python工程师标准>>>

之前也写了react中的轮播图，用的是react-swipe

现在用的是在react中导入swiper.js来实现菜单栏左右滑动特效。话不多说，还是上代码：

注意：在react中一定要记得导入swiper.min.css。import Swiper from 'swiper'这段代码只导入了js

import React from 'react'
import "./scss/css.css"
import carShopImg from "./../images/carShopImg.png"
import "./../../static/css/swiper.min.css"
import Swiper from 'swiper'
class MyOrederFuRefuseCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }
    componentWillMount(){
        document.title="菜单栏左右滑动特效";
    }
    componentDidMount(){
        let mySwiper = new Swiper('.swiper-container',{
            initialSlide :4,
            slidesPerView :5,
            freeMode: true,
            normalizeSlideIndex:true
        });
    }
   
    render() {
        return (
            

                

                        

                            

                                

                                    

                                        
全部
                                    
                                    

                                         
待付款
                                    
                                    

                                        
待确认
                                    
                                    

                                        
待发货
                                    
                                    

                                        
待收货
                                    
                                    

                                        
已完成
                                    
                                    

                                        
拒绝订单
                                    
                                    

                                        
退货/售后
                                    
                                
                            
                        
                
            
        );
    }
}

export default MyOrederFuRefuseCom

转载于:https://my.oschina.net/u/3650921/blog/1802930