在微信小程序开发中表单组件是非常基础且高频使用的部分。本文将通过一个完整的实战案例带大家掌握checkbox复选框和radio单选框组件的用法并实现通过它们动态控制文本样式的效果。一、案例效果预览我们要实现的功能是页面上方展示一段文字《满江红·写怀》下方提供两组控制组件三个 checkbox分别控制文字是否加粗、是否倾斜、是否加下划线四个 radio分别控制文字字号为30rpx、40rpx、50rpx、60rpx当用户勾选或切换选项时文字样式会实时变化。二、核心知识点在动手之前先了解几个关键点checkbox-group与radio-group单独的checkbox或radio不会触发change事件必须包裹在对应的group组件中才能生效。checkbox-group的change事件返回的是一个数组所有被选中项的值。radio-group的change事件返回的是一个单值当前选中项的值。动态样式绑定小程序中可以通过style{{变量}}的方式动态绑定样式配合setData实现实时更新。三、项目结构text复制下载├── app.json ├── app.wxss └── pages └── index ├── index.wxml ├── index.wxss └── index.js四、代码实现1. app.json 配置如果你使用的是较新的开发者工具默认可能开启了skyline渲染引擎。由于skyline对部分 CSS 属性如text-indent支持不完善建议在app.json中移除renderer: skyline配置使用默认的webview引擎json复制下载{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, sitemapLocation: sitemap.json }2. app.wxss 全局样式css复制下载/**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; }3. index.wxml 页面结构关键点在于style属性使用了数据绑定让文字样式随变量变化html复制下载运行!--index.wxml-- navigation-bar titlecheckbox 和 radio 组件 backfalse 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 组控制字体样式 -- checkbox-group bindchangecheckboxChange checkbox valueisBold加粗/checkbox checkbox valueisItalic倾斜/checkbox checkbox valueisUnderline下划线/checkbox /checkbox-group !-- radio 组控制字体大小 -- radio-group bindchangeradioChange radio value30rpx checkedtrue30rpx/radio radio value40rpx40rpx/radio radio value50rpx50rpx/radio radio value60rpx60rpx/radio /radio-group /view /view /scroll-view4. index.wxss 页面样式css复制下载/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20px; } .txt { text-align: justify; text-indent: 2em; margin: 60px 0; } .other { text-align: center; margin: 60px 0; }5. index.js 逻辑处理这是整个案例的核心需要处理两个change事件javascript复制下载// index.js Page({ data: { myFontSize: 30rpx, // 默认字号 myBold: , myItalic: , myUnderline: }, /** * checkbox-group 事件处理 * e.detail.value 是一个数组包含所有被选中项的 value */ checkboxChange(e) { console.log(e); let selected []; let myBold ; let myItalic ; let myUnderline ; // 获取所有选中项 selected e.detail.value; // 遍历选中项设置对应样式 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: myBold, myItalic: myItalic, myUnderline: myUnderline }); }, /** * radio-group 事件处理 * e.detail.value 是当前选中项的值 */ radioChange(e) { console.log(e); this.setData({ myFontSize: e.detail.value }); } });五、常见问题与避坑指南为什么点击 checkbox 没反应检查是否把checkbox放在了checkbox-group里面并且绑定了bindchange事件。单独使用checkbox是无法触发change事件的。文字缩进text-indent不生效如果app.json中配置了renderer: skyline部分 CSS 属性会不兼容。建议删掉该配置改用默认的webview渲染。如何设置默认选中项checkbox在组件上添加checkedtrue。radio在需要默认选中的那个radio上添加checkedtrue同时data中的初始值要与它的value一致。console.log(e)能看到什么checkbox-groupe.detail.value是数组如[isBold, isItalic]。radio-groupe.detail.value是字符串如40rpx。六、总结通过这个案例我们掌握了checkbox-group和radio-group的基本用法及事件处理通过e.detail.value获取用户选择结果利用setData配合动态style绑定实现样式的实时更新这类“表单控制视图”的模式在小程序中非常常见比如设置页面的主题切换、字体调节、权限开关等场景都可以套用这个思路。掌握它你就迈出了小程序交互开发的重要一步。、
微信小程序实战：checkbox 与 radio 组件的动态样式控制
在微信小程序开发中表单组件是非常基础且高频使用的部分。本文将通过一个完整的实战案例带大家掌握checkbox复选框和radio单选框组件的用法并实现通过它们动态控制文本样式的效果。一、案例效果预览我们要实现的功能是页面上方展示一段文字《满江红·写怀》下方提供两组控制组件三个 checkbox分别控制文字是否加粗、是否倾斜、是否加下划线四个 radio分别控制文字字号为30rpx、40rpx、50rpx、60rpx当用户勾选或切换选项时文字样式会实时变化。二、核心知识点在动手之前先了解几个关键点checkbox-group与radio-group单独的checkbox或radio不会触发change事件必须包裹在对应的group组件中才能生效。checkbox-group的change事件返回的是一个数组所有被选中项的值。radio-group的change事件返回的是一个单值当前选中项的值。动态样式绑定小程序中可以通过style{{变量}}的方式动态绑定样式配合setData实现实时更新。三、项目结构text复制下载├── app.json ├── app.wxss └── pages └── index ├── index.wxml ├── index.wxss └── index.js四、代码实现1. app.json 配置如果你使用的是较新的开发者工具默认可能开启了skyline渲染引擎。由于skyline对部分 CSS 属性如text-indent支持不完善建议在app.json中移除renderer: skyline配置使用默认的webview引擎json复制下载{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, sitemapLocation: sitemap.json }2. app.wxss 全局样式css复制下载/**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; }3. index.wxml 页面结构关键点在于style属性使用了数据绑定让文字样式随变量变化html复制下载运行!--index.wxml-- navigation-bar titlecheckbox 和 radio 组件 backfalse 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 组控制字体样式 -- checkbox-group bindchangecheckboxChange checkbox valueisBold加粗/checkbox checkbox valueisItalic倾斜/checkbox checkbox valueisUnderline下划线/checkbox /checkbox-group !-- radio 组控制字体大小 -- radio-group bindchangeradioChange radio value30rpx checkedtrue30rpx/radio radio value40rpx40rpx/radio radio value50rpx50rpx/radio radio value60rpx60rpx/radio /radio-group /view /view /scroll-view4. index.wxss 页面样式css复制下载/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20px; } .txt { text-align: justify; text-indent: 2em; margin: 60px 0; } .other { text-align: center; margin: 60px 0; }5. index.js 逻辑处理这是整个案例的核心需要处理两个change事件javascript复制下载// index.js Page({ data: { myFontSize: 30rpx, // 默认字号 myBold: , myItalic: , myUnderline: }, /** * checkbox-group 事件处理 * e.detail.value 是一个数组包含所有被选中项的 value */ checkboxChange(e) { console.log(e); let selected []; let myBold ; let myItalic ; let myUnderline ; // 获取所有选中项 selected e.detail.value; // 遍历选中项设置对应样式 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: myBold, myItalic: myItalic, myUnderline: myUnderline }); }, /** * radio-group 事件处理 * e.detail.value 是当前选中项的值 */ radioChange(e) { console.log(e); this.setData({ myFontSize: e.detail.value }); } });五、常见问题与避坑指南为什么点击 checkbox 没反应检查是否把checkbox放在了checkbox-group里面并且绑定了bindchange事件。单独使用checkbox是无法触发change事件的。文字缩进text-indent不生效如果app.json中配置了renderer: skyline部分 CSS 属性会不兼容。建议删掉该配置改用默认的webview渲染。如何设置默认选中项checkbox在组件上添加checkedtrue。radio在需要默认选中的那个radio上添加checkedtrue同时data中的初始值要与它的value一致。console.log(e)能看到什么checkbox-groupe.detail.value是数组如[isBold, isItalic]。radio-groupe.detail.value是字符串如40rpx。六、总结通过这个案例我们掌握了checkbox-group和radio-group的基本用法及事件处理通过e.detail.value获取用户选择结果利用setData配合动态style绑定实现样式的实时更新这类“表单控制视图”的模式在小程序中非常常见比如设置页面的主题切换、字体调节、权限开关等场景都可以套用这个思路。掌握它你就迈出了小程序交互开发的重要一步。、
