遇到react绑定事件,自己通过监听touchstart,touchmove,touchend实现滑动和缓冲效果的问题
因为需要在滑动完全结束之后做一些处理,所以我要屏蔽系统自带的滑动,自己通过监听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/ “在线地址”) 在消息上用触摸滑动,然后控制台就能看到错误了,实在查不出来…
1 回复
每次点击只有touchstart和第一次touchmove能读取值,之后都是报错了…