html5 app 左滑

HTML5 App 左滑是指在 HTML5 App 中，用户在屏幕上向左滑动手指，触发相应的事件。这种左滑事件可以用来实现很多功能，比如切换页面、展示菜单等等。

实现 HTML5 App 左滑的原理是通过监听屏幕上的触摸事件，判断用户手指的滑动方向和距离，从而触发相应的事件。下面我们来详细介绍一下实现 HTML5 App 左滑的具体方法。

1. 监听触摸事件

HTML5 中提供了 touchstart、touchmove 和 touchend 三个事件来监听触摸事件。其中 touchstart 事件在用户手指触摸屏幕时触发，touchmove 事件在用户手指在屏幕上滑动时触发，touchend 事件在用户手指离开屏幕时触发。

2. 判断滑动方向

在 touchmove 事件中，我们可以通过记录用户手指触摸屏幕的位置和当前位置的坐标差值，来判断用户手指的滑动方向。如果差值大于一定的阈值，那么我们就认为用户是在左滑。

3. 触发左滑事件

当用户左滑时，我们需要触发相应的事件。在 HTML5 中，我们可以使用自定义事件来实现这个功能。我们可以定义一个名为 leftswipe 的自定义事件，当用户左滑时，就触发该事件，从而执行相应的操作。

下面是一个实现 HTML5 App 左滑的示例代码：

```

var startX, startY;

document.addEventListener('touchstart', function(e) {

startX = e.touches[0].pageX;

startY = e.touches[0].pageY;

}, false);

document.addEventListener('touchmove', function(e) {

var endX = e.touches[0].pageX;

var endY = e.touches[0].pageY;

var deltaX = endX - startX;

var deltaY = endY - startY;

if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < -60) {

var evt = document.createEvent('Event');

evt.initEvent('leftswipe', true, true);

document.dispatchEvent(evt);

}

}, false);

```

在这个示例代码中，我们监听了 touchstart 和 touchmove 事件，并记录了用户手指触摸屏幕时的位置和当前位置的坐标差值。如果差值大于 60，就认为用户是在左滑，从而触发一个名为 leftswipe 的自定义事件。

总结：

HTML5 App 左滑是通过监听触摸事件，判断用户手指的滑动方向和距离，从而触发相应的事件来实现的。实现 HTML5 App 左滑的具体方法包括监听触摸事件、判断滑动方向和触发左滑事件。这种左滑事件可以用来实现很多功能，比如切换页面、展示菜单等等。