Question

我使用Label元素作为按钮。按钮元素有太多填充，我似乎无法覆盖。

在标签上，我想给一个＆＃34;按钮＆＃34;按下反馈，我在ontap事件回调期间执行了以下操作

`

   let oldColor = item.backgroundColor;

   let newColor = new colorModule.Color( "red" );

   label.backgroundColor = newColor;

   setTimeout( () =>
   {
       label.backgroundColor = oldColor;
   }, 125 );

`

但是延迟似乎远远超过125毫秒 - 更像是接近一秒。

有关如何做得更好的任何建议。

Answer 1

对于您的原始问题（按钮有太多填充），听起来您正在尝试将样式应用于CSS中的按钮。

而是将XML属性添加到按钮中以获得所需的宽度和高度：

<Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active" width="150" height="25"/>

Answer 2

您可以发出指令来模仿任何对象上的焦点/高光效果。创建指令文件并将其添加到app.module

它在事件'touch down'和'touch up'发生变化，这是您选择的元素的属性

directive.ts

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { GestureTypes, TouchAction } from 'tns-core-modules/ui/gestures';

@Directive({selector: '[focus]'})
export class FocusDirective implements OnInit {
    private defaultColor: string;
    private color = '#000000';

    constructor(private elementRef: ElementRef) {
    }

    ngOnInit(): void {
        const nativeElement = this.elementRef.nativeElement;
        this.defaultColor = nativeElement.color;
        // you can change here a lot of properties not only color

        nativeElement.on(GestureTypes.touch, ({action}) => {
            switch (action) {
                case TouchAction.down: {
                    nativeElement.color = this.color;
                    break;
                }
                case TouchAction.up: {
                    setTimeout(() => {
                        nativeElement.color = this.defaultColor;
                    }, 80);
                    break;
                }
                default: {
                    nativeElement.color = this.defaultColor;
                }
            }
        });
    }

    @Input() set focus(color: string) {
        if (color) {
            this.color = color;
        }
    }
}

template.html

<Label text="some text" focus="#FFF000"></Label>

Nativescript - 模拟Label元素上的按钮按下

2 个答案: