Demo

开始

clone or down this projectcd examplenpm installnpm start

怎么使用？

安装

npm intsall --save react-mobile-swiper

示例组件:

importReact,{Component}from'react';importSwiperfrom'react-mobile-swiper';constanimateTypes=Swiper.animateTypes;classExampleextentsComponent{render:function(){return(<Swipertype={animateTypes.DEFAULT}loop><div><imgsrc=''/></div><div><imgsrc=''/><div></Swiper>    );},};exportdefaultExample;

属性配置:

Index.PropTypes={index:PropTypes.number,//初始值height:PropTypes.oneOfType([//容器的高度PropTypes.number,PropTypes.string]).isRequired,duration:PropTypes.number,//动画完成周期distance:PropTypes.number,//触发切换的距离loop:PropTypes.bool,//是否循环播放autoPlay:PropTypes.bool,//是否自动播放interval:PropTypes.number,//轮播间隔秒数type:PropTypes.string,//轮播类型 默认支持animateTypetypePro:PropTypes.bool,//需要同屏显示3个slide的时候设置为true.  例如type设置成 animatetype.CARD时pagination:PropTypes.bool,//是否显示分页onSlideChange:PropTypes.func,//slide切换回调createStyle:PropTypes.func//样式生成器，可自行传入};//样式生成器是一个纯函数。用于返回上一，当前，下一slide的样式。默认animateTypes.DEFAULT的配置如下：（注：当typePro设置为true时，为了更好的体验，<br/>需返回，上上张，下下张的样式，即stage==='prePro',stage==='nextPro'）exportdefault(animateTypes,stage,progress,duration)=>{//接收参数依次为动画类型，slide状态，滑动距离，动画执行时间switch(animateTypes){caseanimateTypess.DEFAULT:switch(stage){case'pre':return({transform:`translateX(${-(clientWidth+progress)}px)`,transitionDuration:`${duration}s`});case'active':return({transform:`translateX(${-progress}px)`,transitionDuration:duration+"s"})case'next':return({transform:`translateX(${(clientWidth-progress)}px)`,transitionDuration:duration+"s"})default:break;}break;default:break;}