1. 程式人生 > >vue ---- 實現手機端(左滑 刪除。右劃 正常)

vue ---- 實現手機端(左滑 刪除。右劃 正常)

四種 ber prev 屬性 .html 綁定 .com htm 左右

技術分享圖片

技術分享圖片


touchstart:  // 手指放到屏幕上的時候觸發 
touchmove:  // 手指在屏幕上移動的時候觸發 
touchend:  // 手指從屏幕上拿起的時候觸發 
touchcancel:  // 系統取消touch事件的時候觸發。至於系統什麽時候會取消,不詳


client / clientY:// 觸摸點相對於瀏覽器窗口viewport的位置 pageX / pageY:// 觸摸點相對於頁面的位置 screenX /screenY:// 觸摸點相對於屏幕的位置 identifier: // touch對象的unique ID
http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html
處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件: 1.touchstart: // 手指放到屏幕上的時候觸發 2.touchmove: // 手指在屏幕上移動的時候觸發 3.touchend: // 手指從屏幕上拿起的時候觸發 4touchcancel: // 系統取消touch事件的時候觸發。至於系統什麽時候會取消,不詳 屬性 1.client / clientY:// 觸摸點相對於瀏覽器窗口viewport的位置 2.pageX / pageY:// 觸摸點相對於頁面的位置 3.screenX /screenY:// 觸摸點相對於屏幕的位置
4.identifier: // touch對象的unique ID //touchstart事件 function touchSatrtFunc(e) { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = e.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X坐標 var y = Number(touch.pageY); //頁面觸點Y坐標 //記錄觸點初始位置 startX = x; startY = y; }
//touchmove事件 function touchMoveFunc(e) { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X坐標 var y = Number(touch.pageY); //頁面觸點Y坐標 var text = ‘TouchMove事件觸發:(‘ + x + ‘, ‘ + y + ‘)‘; //判斷滑動方向 if (x - startX != 0) { //左右滑動 } if (y - startY != 0) { //上下滑動 } }

vue ---- 實現手機端(左滑 刪除。右劃 正常)