美文网首页
ionic解决picker选择器组件动态刷新选项重叠、消失的问题

ionic解决picker选择器组件动态刷新选项重叠、消失的问题

作者: 清蒸鱼跃龙门 | 来源:发表于2021-12-16 13:51 被阅读0次

    本地环境

    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/ionic-framework/issues/17664

    解决方案

    每列的选项数量固定为可能性的最大值,实际选项不足的时候填补空白选项,并设置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.

    相关文章

      网友评论

          本文标题:ionic解决picker选择器组件动态刷新选项重叠、消失的问题

          本文链接:https://www.haomeiwen.com/subject/idkvfrtx.html