nativescript-ngx-debounce-tap

{N} + Angular 指令，用于防抖触摸事件并添加动画反馈到交互。

安装

tns plugin add nativescript-ngx-debounce-tap

使用

在您的应用模块中导入模块

import { NgDebounceTapModule } from 'nativescript-ngx-debounce-tap';

@NgModule({
    imports: [
        NgDebounceTapModule,
        // ...
    ],
    // ...
})
export class MyModule { }

然后在模板中使用它，如下所示

 <Label text="Hello World!" 
        ngDebounceTap 
        [delay]="320"
        [anim]="'composite'" 
        [scale]="1.06" 
        [opacity]="0.2" 
        (debounceTap)="hello()"></Label>

请查看演示以快速入门

Screenshot portrait

API

属性	类型	默认值	描述
delay	数字	300	每次处理触摸事件之间的时间（毫秒）。
anim	字符串	n/a	交互的动画方式。可能的值：'composite', 'opacity', 'scale'。Scale => 元素放大并恢复到原始状态。Opacity => 元素的不透明度降至 0.6，然后恢复到正常，类似于 React Native 中的 TouchableOpacity（不是值，是行为）。Composite => 同时执行两种动画。
scale	数字	1.2	放大元素时使用的比例。设置此值以使动画尽可能平滑。
opacity	数字	0.6	用于动画交互的不透明度。根据您的喜好设置它，默认值在某些情况下可能难以看到，请记住这一点！
debounceTap	EventEmitter	n/a	处理触摸事件时发出的事件。$event 变量将引用被触摸的元素（作为 ElementRef）。如果缩放动画不是您想要的，您可以在此回调中设置 [anim] 为 false 并创建一个适合您的动画。

变更日志

1.2.0 - 添加了 opacity @Input 属性以进行进一步自定义。1.1.0 - 添加了透明度动画作为选项。1.0.0 - 初始实现

许可协议

Apache 许可协议第 2 版，2004 年 1 月