时间戳

首页 > 解决方案 > Ionic 4 - 平板电脑上的点击与触摸启动（点击/移动配置问题）

angular - Ionic 4 - 平板电脑上的点击与触摸启动（点击/移动配置问题）

问题描述

我们开发了一个 Ionic 4 应用程序，该应用程序安装在 Android 平板电脑上的 POS（销售点）中。

问题是，<ion-button (click)="doSomething">事件通常不会被识别，因为用户站在非常低的平板电脑前并且没有进行干净的点击，而是一个非常小的水平移动，离子似乎将其识别为（触摸）移动。这在廉价的三星 Tab A 和三星 Tab S3 上经常发生。

该按钮实际上会像触摸一样改变它的颜色，但它不会触发。这不会发生在 android 键盘上，因此键盘上的按钮似乎更能容忍小动作。

我们尝试了很多组合，比如

(click) tappable
tap
(click) (touchmove)
(clik) (tap)
(tap) 
(click) (touchstart)
(touchmove)
(touchstart)

唯一工作的是最后一个。（自然不能在元素列表中使用它，因为它会阻止滚动，但我们可以忍受）。

现在我认为这是一个有点肮脏的解决方法。有没有更好的解决方案来解决这个问题，比如配置按钮内的移动容差？（事实上​​，只要我的手指停留在按钮区域，我就想识别点击，这就是它与角键盘的工作方式）。

欢迎任何建议。

顺便说一句：我不记得在 Ionic 3 上有这么严重的问题，但我可能错了。

标签： angularbuttonclickionic4touchstart

解决方案

尝试这种方法来微调“水龙头”的灵敏度：

如果您使用的是 Angular 6+（Ionic 4）而不是 Angular < 5.2（其中hammerjs 是浏览器模块的一部分），请在 main.ts 中导入hammerjs：

import "hammerjs";

创建一个hammer.config.ts 提供者：

import { Injectable } from '@angular/core';
import { HammerGestureConfig } from '@angular/platform-browser';

@Injectable()
export class MyHammerGestureConfig extends HammerGestureConfig  {
  overrides = <any> {
      'tap': { threshold: 50, posTreshold: 2, time: 2000 } // default 2, 10
      'pan': { threshold: 60, posTreshold: 2 } // default 2, 10
  };
};

在您的 app.module.ts 中执行以下操作：

..
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { MyHammerGestureConfig } from '../providers/hammer.config';

..
providers: [
    ..
    [
      { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerGestureConfig }
    ]
  ],

现在将您的按钮绑定到（点击），然后使用阈值来查看是否可以为您的用户找到合适的平衡点。

推荐阅读