React js 移动端轮播图如何实现?

有好用的移动端的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里才能供这些函数去进行操作吗?

阅读 20.3k
4 个回答

利用ReactCSSTransitionGroup插件和CSS动画可以做,或者直接用ReactTransitionGroup自己操作DOM也行。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题