4.2 checkbox 和 radio 组件

一、实验目的掌握checkbox‑group与checkbox多选组件的用法理解多选返回数组的特点。掌握radio‑group与radio单选组件理解单选返回单个字符串值。学会使用bindchange监听选择组的变化事件。掌握行内动态 style 样式绑定通过 js 变量实时修改页面文字样式。练习setData()更新视图理解小程序视图层与逻辑层分离。完成作业拓展新增30rpx字体大小选项实现 PPT 效果图选项后的右箭头符号。了解渲染引擎坑点skyline 引擎不支持text‑indent首行缩进。二、实验环境开发工具微信开发者工具项目不使用云服务、不使用模板基础小程序技术栈WXML、WXSS、JavaScript三、核心知识点checkbox‑group多选框容器必须把 checkbox 放到 group 内部bindchange监听选中改变e.detail.value返回选中 value 构成的数组支持多项同时选中。radio‑group单选框容器radio 必须放在 group 内部e.detail.value返回单个被选中 radio 的 value 字符串同一时间只能选中一项。动态行内样式style属性:{{变量}}js 修改 data 变量页面样式自动变化。checked属性设置 radio 默认选中项。WXML 转义字符大于号不能直接写必须写gt;。app.json 配置删除renderer:skyline否则首行缩进text‑indent:2em失效。四、项目文件结构pages └── index ├─ index.wxml //页面结构添加gt;右箭头 ├─ index.wxss //页面局部样式 └─ index.js //业务逻辑 app.wxss //全局样式 app.json //项目配置移除skyline app.js五、完整代码实现1.app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2 }2.pages/index/index.wxml已加上 PPT 效果图的gt;右箭头!--index.wxml-- navigation-bar titlecheckbox 和 radio 组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle满江红·写怀/view view classtxt stylefont-weight:{{myBold}};font-style:{{myItalic}};text-decoration:{{myUnderline}};font-size:{{myFontSize}}; view 怒发冲冠凭栏处、潇潇雨歇。抬望眼、仰天长啸壮怀激烈。三十功名尘与土八千里路云和月。莫等闲、白了少年头空悲切。 /view view 靖康耻犹未雪。臣子恨何时灭。驾长车踏破贺兰山缺。壮志饥餐胡虏肉笑谈渴饮匈奴血。待从头、收拾旧山河朝天阙。 /view /view view classother checkbox-group bindchangecheckboxChange checkbox valueisBold加粗 gt;/checkbox checkbox valueisItalic倾斜 gt;/checkbox checkbox valueisUnderline下划线 gt;/checkbox /checkbox-group !--作业新增30rpx选项文字后添加箭头-- radio-group bindchangeradioChange radio value30rpx30rpx gt;/radio radio value40rpx40rpx gt;/radio radio value50rpx checkedtrue50rpx gt;/radio radio value60rpx60rpx gt;/radio /radio-group /view /view /scroll-view3.pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20rpx; } .txt { /* 设置文本两端对齐首行缩进2字符 */ text-align: justify; text-indent: 2em; margin: 60rpx 0; } .other { text-align: center; margin: 60rpx 0; }4.app.wxss 全局样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }5.pages/index/index.js// index.js Page({ data: { myFontSize: 50rpx, myBold: , myItalic: , myUnderline: }, /** * checkbox‑group多选事件 */ checkboxChange(e) { console.log(e); let selected e.detail.value; let myBold ; let myItalic ; let myUnderline ; //遍历选中项数组 for (let index 0; index selected.length; index) { const element selected[index]; if (element isBold) { myBold bold } if (element isItalic) { myItalic italic } if (element isUnderline) { myUnderline underline } } this.setData({ myBold, myItalic, myUnderline }) }, /** * radio‑group单选事件 */ radioChange(e) { console.log(e); this.setData({ myFontSize: e.detail.value }) } })六、运行测试多选测试勾选加粗、倾斜、下划线诗词同步变化样式取消勾选样式消失。单选测试切换30rpx、40rpx、50rpx、60rpx诗词字体大小实时改变默认选中 50rpx完成作业新增 30rpx 要求。界面效果每个选项文字后面显示箭头和 PPT 截图效果一致诗词段落首行空两格。七、踩坑记录与问题解决问题选项后面没有 PPT 图里的右箭头原因小程序原生checkbox/radio组件不会自带箭头符号。 解决在标签文本后写转义字符gt;不能直接写。问题诗词不会首行缩进text‑indent 不生效原因app.json 开启了renderer:skyline新渲染引擎该引擎不支持 text‑indent。 解决删除renderer:skyline配置项使用 webview 渲染。问题checkbox 单独写bindchange 不触发原因checkbox必须包裹在checkbox‑groupradio必须包裹在radio‑group事件绑定写在 group 标签上子组件无法直接监听 change 事件。问题多选拿到的数据是什么格式解决e.detail.value是数组保存所有选中 checkbox 的 valueradio 拿到的是单个字符串值调试时console.log(e)打印事件对象观察数据结构。问题取消勾选之后样式没有消失解决循环遍历选中数组如果没有匹配的 value变量保持为空字符串setData更新空字符串css 样式属性置空效果消失。八、实验总结本次实验学习了小程序多选checkbox‑group与单选radio‑group组件。多选返回数组可以同时选中多个单选返回单个字符串只能选一项。通过 wxml 行内style动态绑定 data 变量调用setData()驱动页面样式实时更新。 开发中要注意渲染引擎兼容性部分 css 属性在 skyline 引擎会失效wxml 特殊符号需要使用转义字符选择组件必须放在对应的 group 容器内事件绑定写在 group 上。通过 console 打印事件对象可以快速查看接口返回数据辅助调试。