react移动端swiper组件 之上下滑动页面

写h5页面经常会用到上下平滑滚动的页面，我在项目中经常使用的组件有iscroll或swiper

下面介绍swiper的用法：

   一、html中引入css和js文件

     

<link rel="stylesheet" href="/css/swiper.min.css" />

<script src="/js/swiper.min.js"></script>

 二、写好自己的样式：

   官方例子抄一下

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  color: black;
  height: 60px;
  width: 100%;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

三、react js代码：

module.exports = React.createClass({
    getInitialState: function () {
        return {

        }

    },
    componentDidMount: function () {
        setTimeout(this.scroll,1000);
    },
    scroll:function(){
        var swiper = new Swiper('.swiper-container', {
            speed: 300,
            slidesPerView: 'auto',
            freeMode: true,
            direction: 'vertical',
            setWrapperSize: true,
            pagination: {
                clickable: true,
            },
        });
    },
    render: function () {

        return (
            <div className="HOME">
                <div className="nearby_header">
                    header
                </div>
                <div className="nearby_content">
                    <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 className="swiper-slide">Slide 4</div>
                            <div className="swiper-slide">Slide 5</div>
                            <div className="swiper-slide">Slide 6</div>
                            <div className="swiper-slide">Slide 7</div>
                            <div className="swiper-slide">Slide 8</div>
                            <div className="swiper-slide">Slide 9</div>
                            <div className="swiper-slide">Slide 10</div>
                        </div>
                    </div>


                </div>
                <Menu tab="nearby"/>
            </div>
        );
    }
});

四、显示结果：