Slider 和 ngModel 因手指滑动而滞后

Question

我运行遇到滑块组件的性能问题。

<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

Answer 1

我做了一些研究，发现处理这种滞后的一种可能解决方案是手动更新标签的文本属性。您可以为 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;
    }
}

Slider 和 ngModel 因手指滑动而滞后

Slider and ngModel lagging with finger slide

android

nativescript

angular