滚动RadListView时,按钮保持:突出显示

时间:2019-05-11 14:33:34

标签: angular nativescript

在Android上,如果我按下RadListView内的按钮并滚动列表,则该按钮将保持:highed。当我停止按下它时,该按钮将保持:突出显示,直到再次按下它。为什么按钮保持:高亮显示?

HTML:

<GridLayout class="main" tkExampleTitle tkToggleNavButton>
<RadListView [items]="dataItems">
    <ng-template tkListItemTemplate let-item="item">
        <GridLayout class="post" rows="auto" columns="*">
            <Button row="0" col="0" class="btn btn-flat" text="Question"></Button>              
        </GridLayout>
    </ng-template>
</RadListView>

CSS:

.btn {
    font-size: 14px;
}

@mixin btn-highlighted {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@mixin an-btn-flat-highlight($color-from, $color-to) {
    @keyframes btn-flat-highlight {
        from {
            background-color: $color-from;
        }
        to { 
            background-color: $color-to; 
            border-color: $color-to;
        }
    }
}


.btn-flat {
    background-color: transparent;
    border-width: 1;
    border-color: transparent;
    color: $color-secondary;
    padding: 0;
    &:highlighted {
        @include btn-highlighted;
        @include an-btn-flat-highlight(transparent, #ccc);
        animation-name: btn-flat-highlight;
    }
}

TS:

    export class ButtonListComponent implements OnInit {
      private _dataItems: ObservableArray<DataItem>;

      constructor() { }

      get dataItems(): ObservableArray<DataItem> {
          return this._dataItems;
      }

      ngOnInit() {
        let items: Array<DataItem> = [];
        for(let i=0; i<50; ++i){
          let item: DataItem = {
            name: "Activity "+i
          }
          items.push(item);
        }
        this._dataItems = new ObservableArray(items);
      }

    }

    interface DataItem {
      name: String;
    }

我希望按钮不会再滚动:滚动后突出显示

0 个答案:

没有答案