Page 372 - AngularJS权威教程

352 第 26 章 移动应用

</div>
<div ng-show="mail.showActions" ng-swipe-right="mail.showActions=false">
<ul class="actions">
<li><button>Archive</button></li>
<li><button>Trash</button></li>
</ul>
</div>
</li>
</ul>

图26-1 Swipe指令示例

26.2.3 $swipe服务

可以直接使用$swipe服务实现更多自定义的基于touch的动画。这个$swipe服务简化了拖拽
滑动行为的细节。

$swipe服务有一个独特的bind()方法。这个bind()方法接受一个要绑定swipe行为的元素作
为参数，以及一个带有四个事件处理程序的对象。

这些事件处理程序需要一个参数对象，该对象包含一个坐标对象，就像：{x: 200, y: 300}。

这四个事件处理程序分别处理以下事件。
 start

start事件在mousedown或者touchstart事件上触发。触发这一事件之后，$swipe服务会监
控touchmove和mousemove事件。而这些事件只会在移动的距离超过特定（一小段）距离时触发
（为了防止意外的滑动）。

一旦超过这个特定的距离，下面两个事件之一就会发生：
 如果垂直增量大于水平增量，浏览器将它作为滚动事件处理；
 如果水平增量大于垂直增量，则被当作滑动行为，然后它会设置move和end事件跟踪swipe行为。

 move
实际上，在这个过程中，move事件只会在$swipe服务确定该操作是一个滑屏操作之后调用
mousemove和touchmove事件。
 end

end事件在touchend或者mouseup事件之后，并且move事件被触发后触发。