资讯动态-移动端H5页面滑动手势X轴实例

移动端H5页面滑动手势X轴实例

2019-07-15 17:49:21

　　话不多少，上代码。

　　let touchX = 0 // 默认初始值// 两行注释伪代码，绑定 touchstart 与 touchend 事件// dom.addEvenetListener('touchstart', touchStart)// dom.addEvenetListener('touchend', touchEnd)function touchStart(e) {// 手指触碰时候，重置 touchX 记录值 touchX = e.touches[0].clientX}function touchEnd(e) { // 松开手指时候，进行计算，这里设置偏移量大于 50 像素认为有意思切换，即 50 像素以内为误触 let offsetX = e.changedTouches[0].clientX - touchX if(offsetX < -50) swipeLeft() else if(offsetX > 50) swipeRight()}function swipeLeft() { console.log('手指左划，即页面内容向左滚动呈现右侧') }function swipeRight() { console.log('手指右划，即页面内容向右滚动呈现左侧') }这点东西即可实现，无需代码库，若需要 Y 轴自行修改相应 X 为 Y 即可。