react轮播图

引入swiper插件：
var ComponentBanner=React.createClass({
    //设置默认的数据源
    getDefaultProps:function(){
        return {sourceUrl:
        'http://datainfo.duapp.com/shopdata/getBanner.php'}
    },//设置状态 存储变化的数据
    getInitialState:function(){
        return {result:[]}
    },//willmount里面去发送ajax请求
    componentWillMount:function(){
        var _this=this;
        Common.http(this.props.sourceUrl,function(data){
            console.log(typeof data);
            //jsonp ---- callback(json);
            var point=data.indexOf("(");
            var length=data.length;
            data=data.substring(point+1,length-1);
            data=JSON.parse(data);
            console.log(data);
            //把得到的数据放进result里面
            _this.setState({result:data});
        });
    },render:function(){
        //jsx支持叠加,jsx本身就是数组
        var s=[];//存储jsx叠加后的总的jsx结果 数组
        for(var i=0;i<this.state.result.length;i++){
        var img=JSON.parse(this.state.result[i].goodsBenUrl)[0];
            s.push(<div style={styleSheets.banner} className="swiper-slide">
                       <img style={styleSheets.bannerimg}  
                       src={img}/>
                     </div>);
        }
        return(
            <div style={styleSheets.banner}>
               <div className="swiper-container">
                  <div className="swiper-wrapper">
                     {s}
                  </div>
               </div>
            </div>
        );
    },componentDidUpdate:function(){
         var swiper=new Swiper('.swiper-container',{
            autoplay:1000,loop:true
         });
    }
});

使用react-swipe和swipe-js-iso
npm install react swipe-js-iso react-swipe
import React from 'react'
import './banner.less'
import ReactSwiper from 'react-swipe'
import banner1 from '../../img/banner1.png'
import banner2 from '../../img/banner2.png'
import banner3 from '../../img/banner3.png'
class Banner extends React.Component {
    constructor(prpos,context) {
        super(prpos,context);
        // this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            index: 0
        }
    }
    render() {
        var opt = {
            auto: 2000,callback:function(index){
                this.setState({index:index})
            }.bind(this)
        }
        return (
            <div>
                <ReactSwiper className="carousel" swipeOptions={opt}>
                    <div>
                        <img src = {banner1} />
                    </div>
                    <div>
                        <img src = {banner2} />
                    </div>
                    <div>
                        <img src = {banner3} />
                    </div>
                </ReactSwiper>
                <div className="index-container">
                    <ul>
                        <li className={this.state.index === 0 ? "selected" : ''}></li>
                        <li className={this.state.index === 1 ? "selected" : ''}></li>
                        <li className={this.state.index === 2 ? "selected" : ''}></li>
                    </ul>
                </div>
            </div>
        )
    }
    componentDidMount() {

    }
}

export default Banner

less：
.index-container {
    height: 0px;
    position: relative;
    ul {
        width: 100%;
        height: auto;
        text-align: center;
        position: absolute;
        top:-20px;
    }
    li {
        display: inline-block;
        height: 9px;
        width: 9px;
        border-radius: 9px;
        background-color: #eee;
        margin: 0 5px;
    }
    li.selected {
        background-color: #009de4;
    }
}
.carousel{
    width: 100%;
    height: 5rem;
        img{
            height: 5rem;
            width: 100%
        }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!