本地環(huán)境
Ionic:
Ionic CLI : 6.17.1
Ionic Framework : @ionic/angular 5.9.2
@angular-devkit/build-angular : 12.0.0
@angular-devkit/schematics : 12.0.5
@angular/cli : 12.0.5
@ionic/angular-toolkit : 4.0.0
問題說明
多列選擇的時候,動態(tài)刷新其他列钦椭,出現(xiàn)選項全擠在一行的情況拧额,滑動后恢復正常碑诉。
屬于官方未解決的bug:
https://github.com/ionic-team/ionic-framework/issues/17664
解決方案
每列的選項數(shù)量固定為可能性的最大值彪腔,實際選項不足的時候填補空白選項,并設置disabled屬性进栽。這樣空選項不會顯示出來德挣。
if (newOptions.length < max) {
for (let j = newOptions.length - 1; j < max; j++) {
const disabledOption: PickerColumnOption = {
text: '',
value: -1,
disabled: true, // 空白選項不顯示
transform: '', // 解決切換選項后,有時選項不會顯示的問題
}
newOptions.push(disabledOption)
}
}
觸發(fā)刷新還需要保證列PickerColumn的prevSelected 快毛!= selectedIndex格嗅,比如新建列前者不設置,后者設為0.