Angular2:用于 md-tab-group 的 HammerJS 滑动 [英] Angular2: HammerJS swipe for md-tab-group

问题描述

我已经在我的 Angular2 网络应用程序中实现了 HammerJS，并且我还测试了 示例 代码.这段代码使用了一个对象数组，似乎工作得很好.但是，我一直在尝试为@angular2-material/tabs 实现相同的系统.因此，我有一个 与多个 应该从选项卡滑动到选项卡.问题是我什至无法触发滑动功能.

HTML 文件:

<div class="swipe-box" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)"><md-tab>(...)//内容标签1</md-tab><md-tab>(...)//内容标签2</md-tab>

</md-tab-group>

在示例中可以看到 *ngFor 的用法类似于 *ngFor="let avatar of avatars; let idx=index" 用于滑动框-<代码>

.但是由于我是从 <md-tab-group> 获取我的索引，所以它似乎没有必要，即使我包含它，我的事件也不会触发，但我的 <md-tab>-content 变为隐藏.因此我把它排除在外.我确实在函数中保留了 idx 参数，因为 swipe 方法需要一个数字(第二个参数是可选的).文档

对于 TypeScript 文件，我已经实现了以下代码(某些代码可能不起作用，但由于未调用 swipe 方法，因此无法对其进行测试).

TS 文件:

导出类 HomeComponent {selectedIndex: number = 1;选择更改():无效{console.log("事件触发索引:" + this.selectedIndex);}SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };//用户滑动时触发的动作滑动(selectedIndex:数字，动作= this.SWIPE_ACTION.RIGHT){console.log("刷卡");//未触发//超出范围if (selectedIndex <0 || selectedIndex > 1 ) 返回；让 nextIndex = 0;//向右滑动，下一个标签如果(动作 === this.SWIPE_ACTION.RIGHT){const isLast = selectedIndex === 1;nextIndex = isLast ?0 : selectedIndex + 1;console.log("向右滑动");}//向左滑动，上一个标签如果(动作 === this.SWIPE_ACTION.LEFT){const isFirst = selectedIndex === 0;nextIndex = isFirst ?1 : selectedIndex - 1;console.log("向左滑动");}}}

HammerJS 功能的现场演示 是的，我已经在 index.html 中实现了所需的脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

解决方案

问题似乎是在错误的

中使用了滑动事件.该事件需要在 parent

中触发.这是工作代码:

HTML 文件:

<div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type))"><md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()"><md-tab>(...)//内容标签1</md-tab><md-tab>(...)//内容标签2</md-tab></md-tab-group></div

TS 文件:

导出类 HomeComponent {selectedIndex: number = 1;选择更改():无效{console.log("选定的索引:" + this.selectedIndex);}SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };//用户滑动时触发的动作滑动(selectedIndex:数字，动作= this.SWIPE_ACTION.RIGHT){//超出范围if (this.selectedIndex <0 || this.selectedIndex > 1 ) 返回；//向左滑动，下一个标签如果(动作 === this.SWIPE_ACTION.LEFT){const isLast = this.selectedIndex === 1;this.selectedIndex = isLast ?0 : this.selectedIndex + 1;console.log("向右滑动 - 索引:" + this.selectedIndex);}//向右滑动，上一个标签如果(动作 === this.SWIPE_ACTION.RIGHT){const isFirst = this.selectedIndex === 0;this.selectedIndex = isFirst ?1 : this.selectedIndex - 1;console.log("向左滑动 - INDEX:" + this.selectedIndex);}}}

I've implemented HammerJS in my Angular2 webapp and I've also tested the example code out. This code uses an Array of objects and seems to work flawlessly. However, I've been trying to implement the same system for @angular2-material/tabs. Therefore I have a <md-tab-group> with multiple <md-tab>'s which should swipe from tab to tab. Problem is that I can't even trigger the swipe function.

HTML-File:

<md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
      <div class="swipe-box" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
        <md-tab>
           (...) //Content Tab 1
        </md-tab>
        <md-tab>
           (...) //Content Tab 2
        </md-tab>
      </div>
</md-tab-group>

In the example can be seen that *ngFor is used like *ngFor="let avatar of avatars; let idx=index" for the swipe-box-<div>. But since I'm getting my index from the <md-tab-group> it doesn't seem neccesary and even when I include it, my event isn't triggered but my <md-tab>-content becomes hidden. Therefore I left it out. I did leave the idx parameter in the function because the swipe method expects a number (second parameter is optional). Documentation

For the TypeScript-file I've implemented the following code (some code might not work but haven't been able to test it since the swipe method doesn't get called).

TS-File:

export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("event triggered INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    console.log("swiped"); //DOES NOT GET TRIGGERD
    // Out of range
    if (selectedIndex < 0 || selectedIndex > 1 ) return;

    let nextIndex = 0;
    // Swipe right, next tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isLast = selectedIndex === 1;
      nextIndex = isLast ? 0 : selectedIndex + 1;
      console.log("swipe right");
    }

    // Swipe left, previous tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isFirst = selectedIndex === 0;
      nextIndex = isFirst ? 1 : selectedIndex - 1;
      console.log("swipe left");
    }
  }
}

Live demo of what HammerJS does and yes, I've implemented the script needed in the index.html

<!-- Hammer JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

解决方案

The problem appeared to be that the swipe-event is used in the wrong <div>. The event needs to be triggered in the parent <div>. here's the working code:

HTML-File:

<div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
   <md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
           <md-tab>
              (...) //Content Tab 1
           </md-tab>
           <md-tab>
              (...) //Content Tab 2
           </md-tab>
   </md-tab-group>
</div

TS-File:

export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("Selected INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    // Out of range
    if (this.selectedIndex < 0 || this.selectedIndex > 1 ) return;

    // Swipe left, next tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isLast = this.selectedIndex === 1;
      this.selectedIndex = isLast ? 0 : this.selectedIndex + 1;
      console.log("Swipe right - INDEX: " + this.selectedIndex);
    }

    // Swipe right, previous tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isFirst = this.selectedIndex === 0;
      this.selectedIndex = isFirst ? 1 : this.selectedIndex - 1;
      console.log("Swipe left - INDEX: " + this.selectedIndex);
    }
  }
}

这篇关于Angular2:用于 md-tab-group 的 HammerJS 滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！