Question

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

<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>

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

Answer 1

有指令ng-swipe-left =＆＃34; fn1（）＆＃34;和ng-swipe-right =＆＃34; fn2（）＆＃34;。

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

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

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

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

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

 </div>

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

Answer 2

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

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

其中goLeft和goRight是包含可转换元素的控制器上的函数 - 有关完整代码和使用示例，请参阅此plunkr。

一旦检测到轻扫手势，指令就开始移动内容并在touchEnd事件上执行功能，所以感觉非常自然。

Angular JS中的滑动支持

2 个答案: