一、實驗目標學習 picker 普通選擇器modeselector通過range綁定選項數(shù)組使用bind:change監(jiān)聽選擇變化事件對象e.detail.value可以獲取用戶選中項的數(shù)組下標完成數(shù)據(jù)更新。掌握 WXML 條件渲染wx:if / wx:elif / wx:else分支判斷語法。理解block虛擬標簽僅做邏輯包裹不會生成真實 DOM 節(jié)點適合批量控制多個組件渲染。掌握input組件bind:blur失焦事件真機typedigit調(diào)出帶小數(shù)點數(shù)字鍵盤。二、案例功能說明頁面初始化上方顯示紅色文字與紅色色塊下方 input 輸入框默認展示紅、綠、藍三色條。picker 點擊彈出底部選擇列表選中顏色點確定上方文字和色塊同步更新。input 輸入數(shù)字失去焦點觸發(fā)邏輯輸入≤0下方三色條隱藏輸入0三色條展示。三、項目配置新建小程序項目不使用云服務、不使用模板。修改app.json指定 webview 渲染引擎{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass?easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }四、完整代碼實現(xiàn)4.1 pages/index/index.wxmlnavigation-bar title條件渲染和picker組件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle條件渲染和picker組件/view picker modeselector range{{colors}} bind:changecolorPick 請點擊此處的picker組件 /picker view wx:if{{color 0}}紅色/view view wx:elif{{color 1}}綠色/view view wx:elif{{color 2}}藍色/view view wx:elif{{color 3}}紫色/view view classview-item stylebackground-color: {{colors[color]}};/view /view view classbox view classtitleblock中的條件渲染/view input typedigit placeholder請輸入一個數(shù)字 bind:blurcolorSet / block wx:if{{digitValue 0}} view classview-item bc-red/view view classview-item bc-green/view view classview-item bc-blue/view /block /view /scroll-view關鍵點解析picker modeselector range{{colors}} bind:changecolorPickrange綁定顏色數(shù)組bind:change監(jiān)聽選擇變更事件博客園。wx:if/wx:elif做多分支文本渲染根據(jù)color下標顯示對應顏色文字。stylebackground-color: {{colors[color]}}動態(tài)內(nèi)聯(lián)樣式數(shù)組下標映射顏色。block wx:if{{digitValue 0}}block 虛擬標簽條件成立才渲染內(nèi)部 3 個顏色條block 本身不會輸出頁面元素。bind:blurcolorSet輸入框失去焦點觸發(fā)事件真機typedigit喚起帶小數(shù)點數(shù)字鍵盤。4.2 pages/index/index.jsPage({ data: { color: 0, digitValue: 1, // 擴展作業(yè)增加purple紫色 colors: [red, green, blue, purple] }, // picker選擇變更事件 colorPick(e) { console.log(e); this.setData({ color: e.detail.value }) console.log(this.data.color); }, // input失去焦點事件 colorSet(e) { console.log(e); let num Number(e.detail.value) if (!isNaN(num)) { this.setData({ digitValue: num }) } console.log(this.data.digitValue); } })關鍵點解析colors數(shù)組存儲顏色字符串picker 的range直接讀取該數(shù)組擴展作業(yè)增加purple。colorPick(e)e.detail.value返回 picker 選中項的數(shù)組下標setData()更新頁面數(shù)據(jù)驅動視圖刷新。colorSet(e)獲取輸入框值轉為數(shù)字判斷有效數(shù)字后更新digitValue用于 block 條件渲染。4.3 app.wxss全局樣式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; text-align: center; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }4.4 pages/index/index.wxss頁面局部樣式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } picker { color: tomato; margin: 40rpx; background-color: lightgray; font-size: 40rpx; padding: 20rpx; } .view-item { width: 90%; height: 100rpx; margin: auto; } .bc-red { background-color: red; } .bc-green { background-color: green; } .bc-blue { background-color: blue; } .bc-purple { background-color: purple; }五、測試驗證功能校驗清單表格測試場景預期結果初始化頁面上方紅色色塊下方三色條正常顯示點擊 picker底部彈出 4 個選項 red/green/blue/purple選中 purple 確定文字顯示紫色色塊變?yōu)樽仙謩e選擇紅、綠、藍文字、色塊同步切換原有功能不受影響input 輸入 0點擊空白失焦下方紅、綠、藍三色條消失input 輸入 5點擊空白失焦下方三色條重新渲染顯示真機點擊輸入框彈出帶小數(shù)點的數(shù)字鍵盤六、核心知識點總結picker 普通選擇器modeselectorrange接收數(shù)組bind:change事件中e.detail.value拿到選中項下標再通過下標取數(shù)組真實值微信開放社…。wx:if 條件渲染屬于真實銷毀 / 創(chuàng)建節(jié)點條件為 false 時節(jié)點完全不存在頁面區(qū)別于hidden只是 css 隱藏。多分支搭配wx:if/wx:elif/wx:else。block 標簽僅邏輯容器不會生成 DOM適合批量控制一組組件的渲染不要替換成 view否則會多出多余容器節(jié)點。bind:blur 失焦事件輸入框離開焦點才觸發(fā)邏輯適合完成輸入之后再做業(yè)務處理而不是每輸入一個字符就執(zhí)行。七、踩坑記錄代碼出現(xiàn)unexpected character報錯注意不要復制長破折號特殊字符全部使用英文-。模擬器看不到數(shù)字鍵盤typedigit數(shù)字鍵盤僅真機生效模擬器無法觀察。picker 沒有紫色選項檢查index.js中colors數(shù)組是否添加purple字符串。