一、需求分析
本次作业实现一个小程序案例，综合练习 picker 选择器组件、wx:if 条件渲染、block 块渲染以及 input 输入框的失焦事件。
功能要点：页面上方是一个 picker 选择器，默认显示红色文字与红色色块；下方是数字输入框；输入框下方展示红、绿、蓝三条色块。点击 picker 会从底部弹出颜色选项，选定后点击确定，上方文字与色块同步变为所选颜色。输入框使用 type=digit，真机上会唤起带小数点的数字键盘；输入数字并让输入框失去焦点后，若数值小于等于 0，下方三条色块隐藏，若大于 0 则显示。
二、整体思路
整个案例可拆解为两条交互线：
- picker 链路：change 事件返回选中项下标，写入 data 中的 color，驱动上方文字的条件渲染和色块的背景色。
- 输入框链路：blur 失焦事件读取输入值并转成数字，写入 digitValue，再由 wxml 中的 block 条件判断控制三条色块的显隐。
三、页面结构（index.wxml）
由两个 box 区域组成：第一个区域用 picker 选色并渲染文字与色块，第二个区域用 block 条件渲染三条色块。
<!--index.wxml-->
<navigation-bar title="条件渲染和picker组件" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
<view class="box">
<view class="title">条件渲染和picker组件</view>
<picker mode="selector" range="{{colors}}" bind:change="colorPick">
请点击此处的picker组件
</picker>
<view wx:if="{{color == 0}}">红色</view>
<view wx:elif="{{color == 1}}">绿色</view>
<view wx:elif="{{color == 2}}">蓝色</view>
<view wx:else>紫色</view>
<view class="view-item" style="background-color: {{colors[color]}};"></view>
</view>
<view class="box">
<view class="title">block中的条件渲染</view>
<input type="digit" placeholder="请输入一个数字" bind:blur="colorSet" />
<block wx:if="{{digitValue > 0}}">
<view class="view-item bc-red"></view>
<view class="view-item bc-green"></view>
<view class="view-item bc-blue"></view>
</block>
</view>
</scroll-view>
四、核心交互逻辑（index.js）
// index.js
Page({
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 普通选择器：
mode="selector"，range动态绑定选项数组，change 事件返回的是选中项下标而非文本，所以用e.detail.value取出下标更新 color。 - wx:if 条件渲染：
wx:if / wx:elif / wx:else构成分支判断，按 color 下标显示颜色名；条件为假时不创建节点（惰性渲染）。 - block 块渲染：只做逻辑包裹，不会生成额外节点，适合批量控制一组组件显隐；换成 view 会多渲染一层标签。
- blur 失焦事件 + digit 键盘：
bind:blur在输入框失去焦点时才触发；type="digit"在真机弹出带小数点的数字键盘。
六、样式实现（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 数组新增
purple，picker 列表出现第四个选项。 - index.wxml 条件分支改为红、绿、蓝用 wx:elif，最后一支用 wx:else 显示紫色。
- index.wxss 新增
.bc-purple样式类。
九、小结
本案例用选色 + 数字判断的界面，串起 picker 组件、wx:if 条件渲染、block 块渲染与 input 失焦事件四条知识点。理解「change 返回下标」「blur 失焦触发」「block 不生成节点」三个关键点，就能灵活迁移到问卷选择、表单校验、动态显隐等更多场景。
