react轮播图

来源：互联网发布：ude网络连接器编辑：程序博客网时间：2024/05/28 23:11

引入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-isonpm install react swipe-js-iso react-swipeimport 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 Bannerless：.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%        }}

阅读全文

1 0