微信小程序 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>
相关推荐
Goona_3 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
笨笨狗吞噬者4 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
知识分享小能手5 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小56 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人7 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟9 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄9 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐9 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序
说私域13 小时前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
_AaronWong14 小时前
微信小程序同声传译插件接入实战:语音识别功能完整实现指南
前端·微信小程序·uni-app