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 (
            <div>
                <div className="MyOrederFuRefuse" ref="myOreder">
                        <ul className="orederTab clearfloat">
                            <div className="swiper-container">
                                <div className="swiper-wrapper">
                                    <div className="swiper-slide slide1">
                                        <li>全部</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                         <li>待付款</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li >待确认</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li >待发货</li>
                                    </div>
                                    <div className="swiper-slide slide2">
                                        <li >待收货</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li >已完成</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li >拒绝订单</li>
                                    </div>
                                    <div className="swiper-slide slide1">
                                        <li >退货/售后</li>
                                    </div>
                                </div>
                            </div>
                        </ul>
                </div>
            </div>
        );
    }
}

export default MyOrederFuRefuseCom

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