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