首页/新闻资讯/正文详情

微信小程序 checkbox 和 radio 组件案例学习

发布时间:2026/9/24 6:43:45 来源:云帆数科 栏目:资讯中心
微信小程序 checkbox 和 radio 组件案例学习
## 一、实验介绍本次案例学习微信小程序中 checkbox 复选框组件与 radio 单选框组件实现对文本样式和字体大小的动态控制。复选框支持多选可以同时设置文字加粗、倾斜、下划线单选框只能选择一项用来切换诗词的字体尺寸。本次作业在原有案例基础上新增 30rpx 字号选项选中后页面文字自动切换为 30rpx加深对表单组件事件绑定与数据驱动视图的理解。## 二、组件原理1. **checkbox-group checkbox 复选框组**checkbox-group 作为复选框的容器通过 bindchange 绑定切换事件。当勾选或者取消勾选复选框时触发绑定的事件函数e.detail.value 返回一个数组数组里面存放所有被选中复选框的value值。我们可以根据数组内容动态设置文本的字体样式。复选框的特点是支持多选多个选项可以同时选中。2. **radio-group radio 单选框组**radio-group 是单选框容器同样使用bindchange监听选择变化。e.detail.value返回字符串是当前选中单选框的value。单选框同一组内只能选中一个选项适合做互斥选择本案例用来切换字体大小。3. **小程序数据绑定**小程序采用 MVVM 思想在Page的data中定义变量wxml 通过{{}}语法绑定变量。使用this.setData()修改 data 内数据页面视图会自动刷新不需要手动操作 DOM 元素。## 三、功能实现思路页面展示一首《满江红・写怀》诗词分为两个功能区域- 复选框区域提供加粗、倾斜、下划线三个选项。勾选对应选项诗词实时变化样式取消勾选则样式消失。- 单选框区域原有 40rpx、50rpx、60rpx 基础上**新增 30rpx 选项**。点击不同字号单选按钮诗词字体大小同步改变。页面整体使用 view 容器包裹添加边框。标题居中红色正文设置首行缩进排版整洁美观。## 四、开发过程遇到的问题与解决办法1. **模拟器顶部出现黑色区域**一开始误以为是页面代码问题后来发现是开发者工具模拟器开启了【显示设备边框】黑色是手机外壳不是页面内容。关闭模拟器设备边框黑条就消失了不需要修改任何代码。2. **点击复选框、单选框没有任何效果**事件绑定名称拼写错误是最主要原因bindchange的大小写必须严格匹配wxml 绑定的函数名要和 js 里面定义的函数名完全一致。另外修改代码后需要清理缓存再编译旧缓存会导致页面不更新。3. **样式不生效**动态样式写在标签的 style 属性内依靠 data 变量控制。需要确认this.setData正确更新数据才能驱动页面刷新样式。## 五、功能测试1. 勾选加粗诗词文字加粗同时勾选倾斜、下划线多种样式叠加生效取消勾选则对应样式消失。2. 单选字号测试选择 30rpx文字变小选择 40rpx、50rpx、60rpx字体逐级变大。单选框同一时间只能选中一个符合单选组件特性。## 六、实验总结通过这个案例掌握了checkbox-group与radio-group表单组件的使用。分清复选框返回数组、单选框返回字符串的区别理解bindchange事件的使用场景。体会小程序数据驱动视图的核心思想修改 data 数据页面自动更新。同时也注意开发调试的细节例如清理缓存、检查事件名拼写、区分模拟器外壳和页面内容这些都是小程序开发里容易踩坑的地方。本次作业增加 30rpx 选项进一步熟悉单选组件动态修改页面样式的开发流程。

相关推荐

74LS160级联与任意进制计数器:从硬件到Verilog的完整设计指南
74LS160级联与任意进制计数器:从硬件到Verilog的完整设计指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 6:43:21

网络工程师必备:10个高频排障命令详解与实战技巧
网络工程师必备:10个高频排障命令详解与实战技巧

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 6:43:14

Next.js 16 多语言 SEO 实战:用一个路由注册表同时派生 hreflang、sitemap 和语言切换器(9 种语言、132 个 URL)
Next.js 16 多语言 SEO 实战:用一个路由注册表同时派生 hreflang、sitemap 和语言切换器(9 种语言、132 个 URL)

这篇写给正在用 Next.js App Router 做多语言站点、需要每个页面正确输出 hreflang 和 sitemap 的开发者。要解决的问题只有一个:hreflang、sitemap、语言切换器三处的语言映射如何保证永远一致。 hreflang 是告诉搜索引擎「这个页面还有哪些语言版本、分别在哪个 … · 2026/9/24 6:43:14

电脑故障处理打印版:一张纸搞定蓝屏、C盘满、重装排查
电脑故障处理打印版:一张纸搞定蓝屏、C盘满、重装排查

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:31:27

松下A5/A6伺服X4接口位置模式接线指南:7个关键引脚与PLC匹配接法
松下A5/A6伺服X4接口位置模式接线指南:7个关键引脚与PLC匹配接法

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:31:08

1850元X99平台实战:E5-2696V3编译Android 12源码全记录
1850元X99平台实战:E5-2696V3编译Android 12源码全记录

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:30:56

轻量级键盘检测工具:基于Raw Input的精准状态诊断
轻量级键盘检测工具:基于Raw Input的精准状态诊断

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:30:44

OpenStack Nova实例生命周期深度解析:Start、Reboot与Lock操作实战
OpenStack Nova实例生命周期深度解析:Start、Reboot与Lock操作实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:30:32

Arm Development Studio双平台安装避坑指南
Arm Development Studio双平台安装避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:30:25

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码