因为需要在滑动完全结束之后做一些处理,所以我要屏蔽系统自带的滑动,自己通过监听touchstart,touchmove,touchend实现滑动+缓冲效果.

	var Chat = React.createClass({
		getInitialState: function() {
			return {
				slide: {		//滑动
					startTime: 0,
					startY: 0,
					currY: 0
				}
			};
		},
		startSlide: function(e){
			e.preventDefault();
			console.log('开始');
			this.setState({
				slide: {
					startTime: e.timeStamp,
					startY: e.changedTouches[0].pageY
				}
			});
			console.log(this.state.slide)
		},
		moveSlide: function(e){
			e.preventDefault();
			console.log(e.changedTouches[0].pageY - this.state.slide.startY)
			this.setState({
				slide: {
					currY: e.changedTouches[0].pageY - this.state.slide.startY
				}
			});
			console.log(this.state.slide)
		},
		endSlide: function(e){
			console.log(this.state.slide.startY)
			e.preventDefault();
			var time = e.timeStamp - this.state.slide.startTime,
				rangeY = e.changedTouches[0].pageY - this.state.slide.startY,
				speed = Math.abs(rangeY / time);
				console.log('速度:', speed);
			console.log(this.state.slide)
			// if(this.state.slideY > 0){}
		},
		render: function() {
			var chatBoxEvents = {
				onTouchStart: this.startSlide,
				onTouchMove: this.moveSlide,
				onTouchEnd: this.endSlide
			};
			var chatBoxStyle = {
				transform : 'translate3d(0,' + this.state.slide.currY + 'px,0)'
			};


			return (
				<div className="chat-box" {...chatBoxEvents} style={chatBoxStyle}>
					{chatBox}
				</div>
			);
		}
	});

[在线地址] (http://demo.huanghu.me:8900/ “在线地址”) 在消息上用触摸滑动,然后控制台就能看到错误了,实在查不出来…