动态

详情 返回 返回

ionic解決picker選擇器組件動態刷新選項重疊、消失的問題 - 动态 详情

本地環境

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

問題説明

多列選擇的時候,動態刷新其他列,出現選項全擠在一行的情況,滑動後恢復正常。
屬於官方未解決的bug:
https://github.com/ionic-team...

解決方案

每列的選項數量固定為可能性的最大值,實際選項不足的時候填補空白選項,並設置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)
            }
        }

觸發刷新還需要保證列PickerColumn的prevSelected != selectedIndex,比如新建列前者不設置,後者設為0.

Add a new 评论

Some HTML is okay.