事件监听
componentDidMount() { var teachingReportDiv = document.getElementById("teachingReport") as HTMLElement; teachingReportDiv.onmousedown = this.onMouseDown; teachingReportDiv.onmouseup = this.onMouseUp; teachingReportDiv.addEventListener('touchstart', this.onTouchStart, false); teachingReportDiv.addEventListener('touchmove', this.onTouchMove, false); teachingReportDiv.addEventListener('touchend', this.onTouchEnd, false); }
<div id="teachingReport" onTouchStart={(event) => this.onTouchStart(event)}/>
-
touchstart事件：手指触摸时候触发（支持多指触发） -
touchmove事件：手指在滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件能够阻止滚动，固然也不能滥用不然会影响原有页面的上下滚动等。 -
touchend事件：手指从屏幕上离开的时候触发 -
touchcancel事件：当系统中止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并无具体说明。。。不建议使用
事件处理
locationStartX: number = 0; locationEndX: number = 0;
onTouchStart = (event) => { this.locationStartX = event.targetTouches[0].pageX; } onTouchMove = (event) => { // event.preventDefault(); this.locationEndX = event.targetTouches[0].pageX; } onTouchEnd = (event) => { const locationChangedX = this.locationEndX < this.locationStartX; if (Math.abs(locationChangedX) > 10) { const isSlidingToRight=locationChangedX<0; } }
添加切换动画
<div id="teachingReport" onTouchStart={(event) => this.onTouchStart(event)}/>动画数据参考：//动画
@keyframes showFromLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0px); } } @keyframes showFromRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0px); } } @keyframes hideToLeft { from { opacity: 1; transform: translateX(0px); } to { opacity: 0; transform: translateX(-100px); } } @keyframes hideToRight { from { opacity: 1; transform: translateX(0px); } to { opacity: 0; transform: translateX(100px); } }
本文分享自微信公众号 - web前端开发（web_qdkf）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。javascript