Angular JS 中的滑动支持答案

【问题标题】：Swipe Support in Angular JSAngular JS 中的滑动支持
【发布时间】：2015-10-28 08:15:06
【问题描述】：

我正在开发 AngularJs 应用程序，我想通过滑动支持来标记内容。我是 Angular 的新手，我对 Angular 设施不太了解。下面是我的代码

<tabset>
  <tab heading="Tab Item 1">
        <h3 class="header">Heading 1</h3>
        <div class="body">
        Body Conten one
        </div>
  </tab>
  <tab heading="Tab Item 3">
        <h3 class="header">Heading 2</h3>
        <div class="body">
        Body Conten Two
        </div>
  </tab>
  <tab heading="Tab Item 3">
        <h3 class="header">Heading 3</h3>
        <div class="body">
        Body Conten Three
        </div>
  </tab>
</tabset>

当用户在标签内容上滑动时，它应该支持滑动。请帮助我实现这一目标

【问题讨论】：

标签： android ios angularjs angularjs-directive angular-ui-bootstrap

【解决方案1】：

有指令 ng-swipe-left="fn1()" 和 ng-swipe-right="fn2()"。

在屏幕向左滑动时调用 fn1，在屏幕向右滑动时调用 fn2。最好在顶部 div 中使用它。

<div ng-swipe-left="fn1()" ng-swipe-right="fn2()></div>

您必须确保在此 div 内的所有 ng-click 或任何其他事件中使用 $event.stopPropagation(); 所以，

<div ng-swipe-left="fn1()" ng-swipe-right="fn2()>

<div ng-click="fun3();$event.stopPropagation();"></div>

 </div>

所以这里在每个选项卡中使用它并使用 ng-hide 或 ng-show 实现隐藏和显示。还要在 css 中使用一些不透明度和过渡，以便从左到右移动，反之亦然。

【讨论】：

能否请您添加一个示例？ plunker 也很好。我的要求是当用户滑动下一个项目时应该显示用户滑动到右侧的上一个项目是否应该显示

【解决方案2】：

您可以按照建议使用 ngTouch 模块，也可以使用 HTML5 多点触控事件编写自己的 Angular 指令。我这样做是为了启用简单的导航，就像提供的一个 OP 一样。指令通过属性绑定到我们想要滑动的元素，可以这样使用：

<tab heading="Tab Item 2" my-swipe="[goLeft, goRight]">

其中 goLeft 和 goRight 是控制器上包含可滑动元素的函数 - 请参阅 plunkr 了解完整代码和使用示例。

Directive一检测到滑动手势就开始移动内容，并在touchEnd事件上执行函数，所以感觉很自然。

【讨论】：