★ FEATURED ARTICLE 一、需求分析本次作业实现一个小程序案例综合练习 picker 选择器组件、wx:if 条件渲染、block 块渲染以及 input 输入框的失焦事件。功能要点页面上方是一个 picker 选择器默认显示红色文字与红色色块下方是数字输入框输入框下方展示红、绿、蓝三条色块。点击 picker 会从底部弹出颜色选项选定后点击确定上方文字与色块同步变为所选颜色。输入框使用 typedigit真机上会唤起带小数点的数字键盘输入数字并让输入框失去焦点后若数值小于等于 0下方三条色块隐藏若大于 0 则显示。二、整体思路整个案例可拆解为两条交互线picker 链路change 事件返回选中项下标写入 data 中的 color驱动上方文字的条件渲染和色块的背景色。输入框链路blur 失焦事件读取输入值并转成数字写入 digitValue再由 wxml 中的 block 条件判断控制三条色块的显隐。三、页面结构index.wxml由两个 box 区域组成第一个区域用 picker 选色并渲染文字与色块第二个区域用 block 条件渲染三条色块。!--index.wxml--navigation-bar title条件渲染和picker组件 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview classtitle条件渲染和picker组件/viewpicker modeselector range{{colors}} bind:changecolorPick请点击此处的picker组件/pickerview wx:if{{color 0}}红色/viewview wx:elif{{color 1}}绿色/viewview wx:elif{{color 2}}蓝色/viewview wx:else紫色/viewview classview-item stylebackground-color: {{colors[color]}};/view/viewview classboxview classtitleblock中的条件渲染/viewinput typedigit placeholder请输入一个数字 bind:blurcolorSet /block wx:if{{digitValue 0}}view classview-item bc-red/viewview classview-item bc-green/viewview classview-item bc-blue/view/block/view/scroll-view四、核心交互逻辑index.js// index.jsPage({data: {color: 0,digitValue: 1,colors: [red, green, blue, purple]},colorPick(e) {console.log(e);this.setData({color: e.detail.value})console.log(this.data.color);},colorSet(e) {console.log(e);let num Number(e.detail.value)if (!isNaN(num)) {this.setData({digitValue: num})}console.log(this.data.digitValue);}})五、四个关键知识点picker 普通选择器modeselectorrange动态绑定选项数组change 事件返回的是选中项下标而非文本所以用e.detail.value取出下标更新 color。wx:if 条件渲染wx:if / wx:elif / wx:else构成分支判断按 color 下标显示颜色名条件为假时不创建节点惰性渲染。block 块渲染只做逻辑包裹不会生成额外节点适合批量控制一组组件显隐换成 view 会多渲染一层标签。blur 失焦事件 digit 键盘bind:blur在输入框失去焦点时才触发typedigit在真机弹出带小数点的数字键盘。六、样式实现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;}七、踩坑提示navigation-bar 扩展组件wxml 顶部使用了 navigation-bar 自定义导航组件需要在 index.json 用 usingComponents 声明并安装 npm 包否则报「组件路径不存在」。若安装或编译困难可删掉 navigation-bar、清空 index.json、在 app.json 删掉 navigationStyle: custom改用原生导航栏功能不受影响。八、作业扩展增加紫色index.js 的 colors 数组新增purplepicker 列表出现第四个选项。index.wxml 条件分支改为红、绿、蓝用 wx:elif最后一支用 wx:else 显示紫色。index.wxss 新增.bc-purple样式类。九、小结本案例用选色 数字判断的界面串起 picker 组件、wx:if 条件渲染、block 块渲染与 input 失焦事件四条知识点。理解「change 返回下标」「blur 失焦触发」「block 不生成节点」三个关键点就能灵活迁移到问卷选择、表单校验、动态显隐等更多场景。
阅读完成 · 觉得有帮助？
