微信小程序 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.pswp.cn/bicheng/19907.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/19907.shtml
英文地址,請注明出處:http://en.pswp.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;提供品質保證、正品保障的商品。蘇寧易購: 中國家電連鎖巨頭蘇寧旗下的…