Angular/Ionic：在表格中实现滑动手势

Question

我正在尝试实现一个滑动功能来在表之间创建分页。如果向右滑动，您将进入下一页。如果向左滑动，您将转到上一页。

这是我的桌子的代码：

<table
 #tableElement
 id="zone-table-to-export-mobile"
 class="table mb-0"
>
 <tbody class="fs-4">
  <ng-container *ngIf="getZoneKey() as keysArray">
   <ng-container *ngIf="keysArray.length > 0">
    <ng-container *ngFor="let groupItem of keysArray">
     <tr>
      <td>{{ groupItem.group }}</td>
     </tr>
      <ng-container
       *ngFor="
       let key of getVisibleProps(groupItem.group)"
      >
       <tr>
        <td>{{ key }}</td>
        <td
         [innerHTML]="
         getZoneValue(
         statesResponse.zones[currentPage].groups, key)">
        </td>
       </tr>
     </ng-container>
    </ng-container>
   </ng-container>
  </ng-container>
 </tbody>
</table>

我认为这个问题与以下事实有关：swipe 仅适用于 DOM 中的元素。在我的例子中，由于分页使用变量

currentPage

，因此当您执行

currentPage++

时，会显示每个页面的表格内容。

我正在尝试实现此代码，但似乎不起作用。我正在使用 Chrome 开发工具中的切换设备工具栏，不知道这是否是问题所在。

ngOnInit() {
  const gesture = this.gestureCtrl.create({
    el: document.querySelector('.table'), // Reemplaza con el selector correcto
    gestureName: 'swipe',
    onMove: (ev) => {
      const deltaX = ev.deltaX;
      
      const sensitivity = 50;
      
      if (Math.abs(deltaX) > sensitivity) {
        if (deltaX > 0) {
          this.changePage(-1);
        } else {
          this.changePage(1);
        }
      }
    },
  });
  gesture.enable(true);
}

changePage(increment: number) {
  const newPage = this.currentPage + increment;

  if (newPage >= 0 && newPage < totalPages) {
    this.currentPage = newPage;
  }
}

另一个问题与

<table>

HTML 标签有关。如果我尝试访问

ngAfterViewInit

lifecycle hook 中的 DOM 元素，我会得到一个

undefined

或

null

。

我不想使用

Hammer.js

或其他第三方库。我想用 Ionic 原生手势 来实现代码。可能它不起作用，因为我必须同时在 DOM 中提供所有可用的表，一个在另一个之上。

Answer 1

最后我找到了使用

Hammer.js

库的解决方案。它没有我希望的那么好，但目前有效。

this.timeOutId = setTimeout(() => {
 const hammer = new HammerGestureConfig();
 const swipe = hammer.buildHammer(this.tableElement.nativeElement);

 swipe.off('swiperight');
 swipe.off('swipeleft');
 this.currentPage = 0;

 swipe.on('swiperight', () => {
   if (this.currentPage > 0) {
     this.currentPage--;
   }
 });

 swipe.on('swipeleft', () => {
   if (this.currentPage < this.zonePaginationData.length - 1) {
     this.currentPage++;
   }
 });
}, 6000);

由于我的 DOM 结构，我必须使用

timeout

，我必须等到表选择器可用。这不是一个干净的解决方案，但却是一个有效的解决方案。