Question

我遇到了Slider组件的性能问题。

<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

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

滑块和ngModel用手指滑动滞后

1 个答案: