checkbox 和 radio 组件

一、实验目的掌握多选框checkbox和多选组checkbox‑group的用法掌握单选框radio和单选组radio‑group的用法学会通过bindchange事件获取选中项动态修改页面样式拓展新增30rpx字号单选选项理解skyline渲染引擎对部分CSS样式不兼容的问题。二、实验环境微信开发者工具小程序基础库3.17.3三、实验内容页面展示《满江红·写怀》词文。使用checkbox多选框勾选后叠加文字样式加粗、倾斜、下划线使用radio单选框切换字体大小基础选项40rpx、50rpx、60rpx拓展新增30rpx选项。JS获取选中项之后通过setData修改data中的样式变量利用动态行内style绑定实时改变文本样式。核心代码1app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black }, style: v2 }⚠ 注意删除skyline渲染引擎配置否则text-indent首行缩进样式不生效。核心代码2index.wxmlnavigation-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加粗 /checkbox checkbox valueisItalic倾斜/checkbox checkbox valueisUnderline下划线 /checkbox /checkbox-group radio-group bindchangeradioChange radio value30rpx30rpx/radio radio value40rpx40rpx/radio radio value50rpx checkedtrue50rpx/radio radio value60rpx60rpx/radio /radio-group /view /view /scroll-view✅拓展部分radio组内第一行新增radio value30rpx30rpx/radio。核心代码3index.jsPage({ data:{ myFontSize:50rpx, myBold:, myItalic:, myUnderline: }, checkboxChange:function(e){ let selected e.detail.value; let myBold ; let myItalic ; let myUnderline ; for(let i0;iselected.length;i){ const ele selected[i]; if(ele isBold){ myBold bold; } if(ele isItalic){ myItalic italic; } if(ele isUnderline){ myUnderline underline; } } this.setData({ myBold, myItalic, myUnderline }) }, radioChange:function(e){ this.setData({ myFontSize:e.detail.value }) } })核心代码4index.wxsspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio,checkbox { margin: 20rpx; } .txt { text-align: justify; text-indent: 2em; margin: 60rpx 0; } .other { text-align: center; margin: 60rpx 0; }核心代码5app.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; }四、运行效果初始页面默认字号50rpx无加粗、无倾斜、无下划线首行缩进正常显示。勾选加粗文字变粗勾选倾斜文字变斜勾选下划线文字出现下划线。三者可以任意组合多选。点击radio单选框切换字号选择30rpx字体变小选择60rpx字体变大同时只能选中一个字号。拓展效果30rpx选项已经添加选中后文本字号切换为30rpx符合作业拓展要求。五、实验问题分析checkbox与radio的取值区别多选checkbox-group的e.detail.value是数组需要遍历数组判断选中项单选radio-group的e.detail.value是单个字符串直接赋值即可。skyline渲染引擎兼容性问题一开始项目启用了skyline渲染引擎text-indent首行缩进样式失效段落开头没有空格。删除app.json中的skyline相关配置使用默认webview渲染引擎之后缩进样式正常显示。动态样式绑定在view标签的style属性中使用{{变量名}}绑定样式值JS中修改data变量页面样式实时更新。变量为空字符串的时候对应的CSS样式就不生效。六、实验总结本次实验掌握了小程序多选框和单选框组件的用法。checkbox-group支持多选返回值是数组radio-group支持单选返回值是单个字符串。通过事件回调获取选中值结合动态行内样式实现了对文本样式的实时控制。拓展作业新增30rpx字号选项完成作业要求。开发过程中遇到skyline渲染引擎不兼容部分CSS样式的问题通过修改app.json配置解决加深了对小程序渲染引擎的理解。