用手指滑動滑塊和ngModel滯後

我遇到了滑塊組件的性能問題。用手指滑動滑塊和ngModel滯後

<StackLayout> 
    <Label text="time {{time}} minutes"></Label> 
    <Slider minValue=1 maxValue=120 [(ngModel)]="time"></Slider> 
</StackLayout>

當我在我的仿真器和設備運行此（Nexus 5X保護）滑塊數量滯後，當我使用它。我必須比我平常要慢得多的數字來更新我的手指位置。

有沒有更好的方法來實現這種類型的滑塊，其中的數字與我的手指在任何速度下的滑動位置相匹配，沒有滯後？

這個gif是從上面的代碼，並顯示滯後。 https://i.imgur.com/EDxNrUD.gif

來源

2016-06-10 Adam j

可能是https://github.com/angular/angular/issues/6311應列入下一個角更新。您可以嘗試設置ChangeDetectionStrategy.OnPush。 –

我已經做了一些研究，發現處理這種滯後的一種可能的解決方案是手動更新標籤的文本屬性。您可以爲Slider定義onchange方法並處理其值的更改。

至於你可以查看下面我的示例代碼：

import {Component} from "@angular/core"; 
import {CustomComponent} from "./custom.component" 

@Component({ 
    selector: "my-app", 
    directives:[CustomComponent], 
    template: ` 
<StackLayout style="background-color: green;" > 

    <Label [text]="time + 'minutes'"></Label> 
     <Slider #sl minValue=1 maxValue=120 [value]="time" (valueChange)="onchange(sl.value)"></Slider> 
    </StackLayout> 
`, 
}) 
export class AppComponent { 
    public time:number=30; 

    public onchange(newtime){ 
     this.time=newtime; 
    } 
}

來源

2016-06-10 10:30:19

這個伎倆！謝謝您的幫助。 –

用手指滑動滑塊和ngModel滯後

回答

相關問題