Question

我在使用离子范围时遇到问题，我希望它具有非线性值，例如： 0 - 10 - 20 - 30 - 40等... 但更像是： 50 - 100 - 200 - 300 - 400 - 500 - 1000 - 1500等...... 像特定的值数组。是否可以或如何在每次移动时调用.ts方法以在移动旋钮时动态更改步骤？非常感谢

Answer 1

无法自定义您的步骤，但您可以使用的解决方法。假设您有以下数组[50, 100, 200, 300, 400, 500, 1000, 1500]，您可以使用范围更改上的函数根据您所在范围内的值选择此数组中的值：

<!-- -->
<ion-badge>{{customSteps}}</ion-badge>
  <ion-item>
    <!-- YOUR max WILL'BE YOUR ARRAY LENGTH - 1 TO GET THE LAST VALUE POSITION -->
    <ion-range min="0" [max]="rangeArray.length - 1" [(ngModel)]="range" (ionChange)="watchRange()" color="secondary">
    <ion-label range-left>50</ion-label>
    <ion-label range-right>1500</ion-label>
  </ion-range>
</ion-item>

在你的.ts：

range: number = 0;
customSteps: any;
rangeArray: any[] = [50, 100, 200, 300, 400, 500, 1000, 1500];

constructor(){
  // INITIALIZE YOUR RANGE VALUE
  this.watchRange();
}

watchRange(){
  // IN THIS METHOD YOU'LL CHANGE YOUR customSteps VALUE USING THE RANGE VALUE TO GET
  //A VALUE IN YOUR ARRAY POSITION. customSteps WILL BE USED FOR PRESENTATION AND IN YOUR OTHER METHODS
  this.customSteps = this.rangeArray[this.range];
}

希望这有帮助。

具有离子范围值的数组

1 个答案: