扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了原生js如何实现移动端Touch滑动反弹效果，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
移动端 Touch 滑动反弹
什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：
1. 准备工作
什么是移动端的Touch事件？在移动端Touch事件可以细分成三种，分别是：touchstart、touchmove和touchend，并且touch事件必须要用addEventListener去监听。
touchStart当手指触碰到屏幕的时候触发
touchmove当手指在屏幕上不断移动的时候触发
touchend当手指离开屏幕的时候触发
Touch 事件触发的 Event 对象：
// 手指触碰到屏幕时触发
element.addEventListener('touchstart', function (e) {
// 打印的事件对象
console.log(e);
})
changedTouches、targetTouches、touches都是伪数组，里面装的是手指列表
三种返回对象的区别：
其实这三种返回的对象，都是表示用户触摸事件时的手指信息，之所以是一个伪数组，是因为有可能出现多指同时触摸，但是在实际工作中一般不去考虑多指的情况。而它们唯一的区别就是在touchstart和touchmove事件的时候，changedTouches、targetTouches、touches都能获取到手指的信息，但是在touchend事件的时候，targetTouches、touches对象是不能返回离开屏幕时的手指信息，只有changedTouches对象能返回。
有哪些手指信息？
我们可以看下上面的图片，在changedTouche[0]中，有些值：
clientX:74 // 触摸点相对于浏览器的 viewport 左边缘的 x 坐标，不会包括左边的滚动距离。 clientY:73 // 触摸点相对于浏览器的 viewport 上边缘的 Y 坐标，不会包括上边的滚动距离。 screenX:2202 // 触摸点相对于屏幕左边缘的 x 坐标。 screenY:327 // 触摸点相对于屏幕上边缘的 Y 坐标。 pageX:65 // 触摸点相对于 document 的左边缘的 x 坐标，包括左边的滚动距离 pageY:18 // 触摸点相对于 document 的上边缘的 Y 坐标，包括左边的滚动距离2. 基本结构
此案例模拟的是移动端的一种滑动菜单效果。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网