如何把下面代码改造成zepto的滑动形式 - 知否问答 - 万象云+社区

zepto

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 200px; height: 400px; border: 1px solid #ccc; } </style> </head> <body> <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script> <div id="box"></div> <script> $("#box").swipeLeft(function () { console.log('swipeLeft') }) </script> </body> </html>

我的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 200px; height: 400px; border: 1px solid #ccc; } </style> </head> <body> <div id="box">aa</div> <script> function getId(id) { return document.getElementById(id) } function TouchEvent(id) { this.startPoint = null; this.endPoint = null; getId(id).addEventListener("touchstart", function (event) { console.log(event) var event = event || window.event; //兼容ie this.startPoint = event.touches[0] //手指触碰手机的点 }) getId(id).addEventListener("touchend", function (event) { var event = event || window.event; this.endPoint = event.changedTouches[0] //手指离开手机的点 var x = this.endPoint.clientX - this.startPoint.clientX; var y = this.endPoint.clientY - this.startPoint.clientY; //Math.abs为绝对值 //45度为分界点 if (Math.abs(x) > Math.abs(y) && x > 0) { console.log('向右滑动') } else if (Math.abs(x) > Math.abs(y) && x < 0) { console.log('向左滑动') } else if (Math.abs(y) > Math.abs(x) && y > 0) { console.log('向下滑动') } else if (Math.abs(y) > Math.abs(x) && y < 0) { console.log('向上滑动') } else { console.log('触碰') } }) this.swipeLeft = function () { } this.swipeRight = function () { } this.swipeUp = function () { } this.swipeDown = function () { } } var box1 = new TouchEvent('box') function swipeLeft(callback){ callback('swipeLeft') } getId("box").swipeLeft(function (res) { console.log(res) }) </script> </body> </html>

回答动态