微信小程序 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/19907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win10键盘按乱了,如何恢复?

今天键盘被宝宝给按乱了&#xff0c;好不容易给重新调整回来&#xff0c;记录备忘&#xff1a; 1、win10的asdf和方向键互换了&#xff1a; 使用Fnw键来回切换&#xff0c;OK&#xff01; 2、键盘的win键失效&#xff0c;例如&#xff1a;按winD无法显示桌面。此时&#xf…

Day30

Day30 CSS CSS常用样式 font-family:“微软雅黑” -设置字体 font-size: 50px -设置字体大小 font-style : italic-设置字体风格 font-weight:bolder -设置字体粗细 color: white-设置字体颜色 letter-spacing: 20px-设置文本内容的间隔 text-decoration :underline - 设置划…

电动汽车电子系统架构

电动汽车的普及正在稳步发展&#xff0c;供应链的各个环节也在发生变化。它涵盖了制造电动汽车零件的原材料、化学品、电池和各种组件。与此同时&#xff0c;汽车充电基础设施也参与其中&#xff0c;它们正经历一个历史性的阶段&#xff0c;经过彻底的重新设计。它们的电气化以…

Wpf 使用 Prism 实战开发Day30

登录界面设计 一.准备登录界面图片素材&#xff08;透明背景图片&#xff09; 1.把准备好的图片放在Images 文件夹下面&#xff0c;格式分别是.png和.ico 2.选中 login.png图片鼠标右键&#xff0c;选择属性。生成的操作选择>资源 3.MyTodo 应用程序右键&#xff0c;属性&a…

如何修改开源项目中发现的bug?

如何修改开源项目中发现的bug&#xff1f; 目录 如何修改开源项目中发现的bug&#xff1f;第一步&#xff1a;找到开源项目并建立分支第二步&#xff1a;克隆分支到本地仓库第三步&#xff1a;在本地对项目进行修改第四步&#xff1a;依次使用命令行进行操作注意&#xff1a;Gi…

地质灾害位移应急监测站

地质灾害位移应急监测站是一种专门用于地质灾害预警和应急响应的设施&#xff0c;它能够实时监测和分析山体、建筑物、管道等的位移变化情况。以下是关于地质灾害位移应急监测站的详细介绍&#xff1a; 主要组成部分 传感器&#xff1a;安装于需要监测的位置&#xff0c;用于…

RK3588+FPGA+AI高性能边缘计算盒子,应用于视频分析、图像视觉等

搭载RK3588&#xff08;四核 A76四核 A55&#xff09;&#xff0c;CPU主频高达 2.4GHz &#xff0c;提供1MB L2 Cache 和 3MB L3 &#xff0c;Cache提供更强的 CPU运算能力&#xff0c;具备6T AI算力&#xff0c;可扩展至38T算力。 产品规格 系统主控CPURK3588&#xff0c;四核…

Nginx服务器替换SSL证书记得要重启

输入访问域名&#xff0c;发现https证书过期了&#xff0c;果断申请好ssl证书&#xff0c;并在Nginx服务器上将原证书替换成新申请的证书。 打开浏览器输入网址确认一看&#xff0c;还是原来的证书并没有替换成功?感觉不合常理 以下开启了证书为什么替换不成功的排查 1、清除…

GUI 02:布局管理器相关知识,AWT 的 3 种布局管理器应用,以及嵌套布局的使用

一、前言 记录时间 [2024-05-31] 前置文章 GUI 01&#xff1a;GUI 编程概述&#xff0c;AWT 相关知识&#xff0c;Frame 窗口&#xff0c;Panel 面板&#xff0c;及监听事件的应用 本文讲述了 GUI 编程种布局管理器的相关知识&#xff0c;以及 AWT 的 3 种布局管理器——流式布…

【FPGA】Verilog语言从零到精通

接触fpga一段时间&#xff0c;也能写点跑点吧……试试系统地康康呢~这个需要耐心但是回报巨大的工作。正原子&&小梅哥 15_语法篇&#xff1a;Verilog高级知识点_哔哩哔哩_bilibili 1Verilog基础 Verilog程序框架&#xff1a;模块的结构 类比&#xff1a;c语言的基础…

P3881

最小值最大 二分&#xff1a;枚举两个牛之间的最小距离&#xff0c;左端点是1&#xff0c;右端点是篱笆总长度。 Check数组&#xff1a; 如果两头牛之间距离是Mid不合法&#xff0c;则返回0&#xff08;false&#xff09;&#xff1b; 如果两头牛之间距离是Mid合法&#xf…

去噪扩散概率模型在现代技术中的应用:图像生成、音频处理到药物发现

去噪扩散概率模型&#xff08;DDPMs&#xff09;是一种先进的生成模型&#xff0c;它通过模拟数据的噪声化和去噪过程&#xff0c;展现出多方面的优势。DDPMs能够生成高质量的数据样本&#xff0c;这在图像合成、音频生成等领域尤为重要。它们在数据去噪方面表现出色&#xff0…

瑞吉外卖项目学习笔记(二)后台系统的员工管理业务开发

一、完善登录功能 1.1 问题分析 1.2 代码实现 package com.itheima.reggie.filter;//这是一个过滤器类 //登录检查过滤器import com.alibaba.fastjson.JSON; import com.itheima.reggie.common.R; import lombok.extern.slf4j.Slf4j; import org.slf4j.Logger; import org.slf…

华为OD机试-最大坐标值

题目描述与示例 题目描述 小明在玩一个游戏&#xff0c;游戏规则如下&#xff1a;在游戏开始前&#xff0c;小明站在坐标轴原点处&#xff08;坐标值为 0&#xff09;给定一组指令和一个幸运数&#xff0c;每个指令都是一个整数&#xff0c;小明按照指定的要求前进或者后退指…

解析Java中1000个常用类:FunctionalInterface类,你学会了吗?

Java 8 引入了一系列新的特性和改进,其中之一便是函数式编程。函数式接口(Functional Interface)是函数式编程的核心概念之一。本文将深入探讨 FunctionalInterface 注解,介绍其用法、重要性,并通过示例展示如何在实际开发中应用函数式接口。 什么是函数式接口? 函数式…

有向图的拓扑排序

文章目录 概念及模板例题 杂务 概念及模板 有向图的拓扑排序是指将有向无环图中的所有顶点排成一个线性序列&#xff0c;使得图中任意一对顶点u和v&#xff0c;若边(u, v)在图中&#xff0c;则u在该序列中排在v的前面。 例如&#xff0c;假设有n个任务&#xff0c;这些任务需…

HarmonyOS鸿蒙学习笔记(28)@entry和@Component的生命周期

entry和Component的生命周期 entry和Component的关系Component生命周期Entry生命周期 生命周期流程图生命周期展示示例代码参考资料 HarmonyOS的生命周期可以分为Compnent的生命周期和Entry的生命周期&#xff0c;也就是自定义组件的生命周期和页面的生命周期。 entry和Compone…

【传知代码】双深度学习模型实现结直肠癌检测(论文复现)

前言&#xff1a;在医学领域&#xff0c;科技的进步一直是改变人类生活的关键驱动力之一。随着深度学习技术的不断发展&#xff0c;其在医学影像诊断领域的应用正日益受到关注。结直肠癌是一种常见但危害极大的恶性肿瘤&#xff0c;在早期发现和及时治疗方面具有重要意义。然而…

快手发布大模型产品“可图”,超20种创新AI图像玩法限免上线

近日&#xff0c;快手自研大模型产品“可图”&#xff08;Kolors&#xff09;正式对外开放&#xff0c;支持文生图和图生图两类功能&#xff0c;已上线20余种AI图像玩法。目前&#xff0c;用户可以通过“可图大模型”官方网站和微信小程序&#xff0c;免费使用各项AI图像功能。…

纯分享#126个电商平台集合(包含60个不同国家)值得一看

01 亚洲 中国 淘宝&#xff1a;拥有大量的卖家和商品种类&#xff0c;主要面向中国市场。天猫:淘宝旗下的B2C电商平台&#xff0c;提供品质保证、正品保障的商品。京东:中国第二大B2C电商平台&#xff0c;提供品质保证、正品保障的商品。苏宁易购: 中国家电连锁巨头苏宁旗下的…