有好用的移动端的ReactJs轮播图插件吗?
我自己写了一个,感觉效果不是特别好,大概的思路如下:
var OuterBox = React.createClass({
render: function(){
return (
<div className="outerBox">
<div className="showArea">
<ImgBox item={this.props.item}></ImgBox>
</div>
</div>
)
}
});
var ImgBox = React.createClass({
getInitialState : function(){
return {
current: 2,//当前下标,和left定位有直接关系
left: 0,
direction: 0, //-1表示向左滑动,0表示不滑动,1表示向右滑动
startX: 0,
endX: 0
}
},
handleTouchStart : function(e){
this.setState({
startX: e.changedTouches[0].pageX
});
console.log("start======"+this.state.startX);
},
handleTouchMove : function(e){
console.log(e.changedTouches[0].pageX);
},
handleTouchEnd: function(e){
this.setState({
endX: e.changedTouches[0].pageX
})
console.log("end======"+this.state.endX);
},
render : function(){
var direction = this.state.direction;
var styleObj = {
left: this.state.current*-1+"00%"
}
var img = this.props.item.map(function(img,key){
return(
<img src={img.src} alt = {img.alt} key={key} />
)
})
return (
<div className="imgBox" style={styleObj} onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd}>
{img}
</div>
)
}
});
showArea是显示图片的窗口,给个固定高度,设置为overflow:hidden。
然后ImgBox的长度设置为图片数量*100%,ImgBox里的图片用flex等分ImgBox容器。
然后给ImgBox添加touchstart,touchmove,touchend事件。
遇到问题是:
在touchmove事件里,不太懂怎么让ImgBox随着触摸的位置水平移动。
在touchstart,和touchend事件里,startX和endX始终不能正确的保存数据。
最后还有一个疑问,如果组件里有多个事件处理函数需要使用一个类似于全局变量的东西,这个东西放在state里才能供这些函数去进行操作吗?
https://github.com/zhuangtongfa/react-carousel/