微信小程序 vant Picker组件default-index不生效的解决办法

1、原始的写法以及问题

<van-popup show="{{ showPopup && cellClick === 'Freq' }}" position="bottom" bind:close="onPopupClose">
  <van-picker value-key="Spec" show-toolbar title="{{cellClick === 'Freq' ? showPcChangeTitle : ''}}" columns="{{ cellClick === 'Freq' ? pcColumns : hcColumns }}" default-index="{{hcDefaultIndex}}" bind:cancel="onPickerCancel" bind:confirm="onPickerConfirm" bind:change="onPickerChange" />
</van-popup>

之前用 popup 结合现实 picker 显示默认值

在 onload 的时候修改默认值

const index = this.data.hcColumns.findIndex(s => s.Id === item.PrescriptionConsumableInputDtos[0].ConsumableId)
      this.setData({
        showHcName: this.data.hcColumns.filter(s => s.Id === item.PrescriptionConsumableInputDtos[0].ConsumableId)[0].Name,
        hcDefaultIndex: index
      })

结果发现虽然hcDefaultIndex的值确实改变了 但是实际上页面上并没有显示为正确的选项

具体可以看 GitHub 上的一些评论单列picker,设置default-index,不起作用 · Issue #1636 · youzan/vant-weapp · GitHub

2、解决办法

在van-popup上加一个wx:if就可以了(单列和多列都是相同的修改办法)

<van-popup wx:if="{{ showPopup && cellClick === 'Freq' }}" show="{{ showPopup && cellClick === 'Freq' }}" position="bottom" bind:close="onPopupClose">
  <van-picker id="freqPicker" show-toolbar title="{{showPcChangeTitle}}" columns="{{pcColumns}}" bind:cancel="onPickerCancel" bind:confirm="onPickerConfirm" bind:change="onPickerChange" />
</van-popup>
相关推荐
丁总学Java1 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
编程千纸鹤6 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域6 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java18 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域19 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86819 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650220 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享