ion-picker动态设置默认选项

renjiantaotie

已于 2025-05-20 14:27:24 修改

阅读量445

点赞数

分类专栏： angular 文章标签： javascript typescript

于 2020-11-30 17:20:44 首次发布

本文链接：https://blog.youkuaiyun.com/renjiantaotie/article/details/110392849

版权

angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Ionic应用中使用ion-picker组件，并详细说明如何通过传入动态参数使picker默认选中指定项，这对于提升用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic项目中使用ion-picker，如下图所示，selectedIndex为所选picker的index,默认为0，动态传入即可默认选中

async openPicker (numColumns, numOptions, columnOptions, selectedIndex, callback){
    const picker = await this.picker.create({
        columns: this getColumns (numColumns, numOptions,         columnOptions,selectedIndex）
    buttons:［
    ｛
        text: ‘取消‘，
        role:'cancel'
     ｝，
    ｛
        text：'确定',
        handler: (value) => {
                callback(value)
            }
         }
      ］
    }) ;
    await picker-present);
｝


getColumns (numColumns, numOptions, columnOptions,selectedIndex)｛
    let columns = 1];
    for (let i = 0; i < numColumns; i++) {
        columns.push ({
            name: 'col-${i}',
            selectedIndex: selectedIndex,
            options: this.getColumnOption(i, numoptions, columnOptions)
        ｝)；
    ｝
    console. log (columns)
    return columns;
｝