事件監聽
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