react 中列表实现左滑删除

基本布局实现：

render(){
  return (
       {
          dataArray.map((item, index) => (
              <div key={index} id={"swipeable" + index} className={"swipeable"} style={{position: 'relative'}}>
                    <Ons.ListItem>
                        滑动列表{item.content}
                    </Ons.ListItem>
                    <div id={'delButton' + index} 
                        onClick={() => this.deleteItem(item.id, index)}>
                        删除
                    </div>
                </div>
            ));
        }
    )
}

定义屏幕触摸开始事件，滑动中事件，以及滑动结束的事件，允许向左滑动80px，而且同一时间只能有一条数据在滑开状态。

    //触屏开始事件
    touchStartFun(e: any) {
        console.log("touchStartFun");
        if (lastObj !== null && preObj === null) {
            $(lastObj).animate({"left": "0px"}, 300);
            lastObj = null;
        } else {
            pos = {x: 0, y: 0};
            preObj = e.currentTarget;
            Left = parseInt($(preObj).css('left'));
            let touch = e.touches[0];
            pos.x = touch.pageX;
            pos.y = touch.pageY;
            run = 0;
        }
    }

    //触屏滑动事件
    touchmoveFun(e: any) {
        console.log("touchmoveFun");
        if (preObj !== null && lastObj === null) {
            let touch = e.touches[0];
            if (run === 0) {
                if (touch.pageX === pos.x && touch.pageY !== pos.y) {
                    run = 2;
                }
                if (touch.pageX !== pos.x && touch.pageY === pos.y) {
                    run = 1;
                    pos.x = touch.pageX;
                }
                if (touch.pageX !== pos.x && touch.pageY !== pos.y) {
                    if (Math.abs(touch.pageX - pos.x) > Math.abs(touch.pageY - pos.y)) {
                        run = 1;
                        pos.x = touch.pageX;
                    } else {
                        run = 2;
                    }
                }
                if (touch.pageX === pos.x && touch.pageY === pos.y) {
                    run = 0;
                }
            } else if (run === 1) {
                e.preventDefault();
                let len = touch.pageX - pos.x;
                if (Left >= 0) {
                    if (len >= -80 && len < 0) {
                        $(e.currentTarget).css({"left": len + "px"});
                    } else if (len < -80) {
                        $(e.currentTarget).css({"left": -80 + "px"});
                    } else if (len > 0) {
                        $(e.currentTarget).css({"left": 0 + "px"});
                    }
                } else if (Left <= -80) {
                    if (len <= 80 && len > 0) {
                        $(e.currentTarget).css({"left": len - 80 + "px"});
                    } else if (len > 80) {
                        $(e.currentTarget).css({"left": 0 + "px"});
                    } else if (len < 0) {
                        $(e.currentTarget).css({"left": -80 + "px"});
                    }
                }
            }
        }
    }
    
    //触屏结束事件
    touchendFun(e: any) {
        console.log("touchendFun");
        if (preObj !== null && lastObj === null) {
            let touch = e.changedTouches[0].pageX;
            let len = touch - pos.x;
            if (run === 1) {
                e.preventDefault();
                if (len <= -40) {
                    $(preObj).animate({"left": "-80px"}, 150);
                    lastObj = preObj;
                    preObj = null;
                    isCanClick = false;
                } else if (len > -40 && len < 0 && Left >= 0) {
                    $(preObj).animate({"left": "0px"}, 150);
                    preObj = null;
                    lastObj = null;
                    isCanClick = true;
                } else if (len > 0 && len < 40) {
                    $(preObj).animate({"left": "-80px"}, 150);
                    lastObj = preObj;
                    preObj = null;
                    isCanClick = false;
                } else if (len >= 40) {
                    $(preObj).animate({"left": "0px"}, 150);
                    preObj = null;
                    lastObj = null;
                    isCanClick = true;
                }
            }
        }
    }

绑定事件：

    componentDidUpdate() {
        if (this.dataFlag) {
            let that = this;
            ons.ready(function () {
                let swipeItems = (that.refs.messageDom as HTMLElement).querySelectorAll('.swipeable');
                for (let i = 0; i < swipeItems.length; i++) {//循环给每个消息的item绑定触屏事件
                    $(swipeItems[i]).bind("touchstart", that.touchStartFun);
                    $(swipeItems[i]).bind("touchmove", that.touchmoveFun);
                    $(swipeItems[i]).bind("touchend", that.touchendFun);
                }
                domNum = swipeItems.length;
            });
        }
    }

    componentWillUpdate(nextProps: any, nextState: any) {
        //只有在某个条件下才会绑定事件
        if ( canBindListener ) {
            this.dataFlag = true;
        } else {    //之后都为false不会重复绑定dom监听事件
            this.dataFlag = false;
        }
    }

页面销毁，移除事件：

    componentWillUnmount() {
        let swipeItems = (this.refs.messageDom as HTMLElement).querySelectorAll('.swipeable');
        for (let i = 0; i < swipeItems.length; i++) {//循环给消息的每个item解绑触屏事件
            $(swipeItems[i]).unbind("touchstart");
            $(swipeItems[i]).unbind("touchmove");
            $(swipeItems[i]).unbind("touchend");
        }
    }