这次做的是微信小程序的 checkbox 和 radio 组件需求是上面一段预览文字下面放三个复选框和几个单选按钮勾选复选框控制文字加粗、斜体、下划线点单选按钮控制字号大小。做之前以为要每个按钮都绑一个事件写完才发现官方已经提供了 checkbox-group 和 radio-group直接监听组的 change 事件就能拿到所有选中项特别方便。作业要求在原来 40rpx、60rpx 的基础上再加一个 30rpx 的选项加一个 radio 标签就行。页面 index.wxml 大概是这样预览文字的 style 直接用三元表达式动态绑定checkbox-group 和 radio-group 分别绑 change 事件view classcontent stylefont-weight: {{isBold ? bold : normal}}; font-style: {{isItalic ? italic : normal}}; text-decoration: {{isUnderline ? underline : none}}; font-size: {{fontSize}}; 这是一段预览文字勾选复选框改变样式点单选按钮改变字号。 /view checkbox-group bindchangecheckboxChange checkbox valuebold color#1976d2加粗/checkbox checkbox valueitalic color#1976d2斜体/checkbox checkbox valueunderline color#1976d2下划线/checkbox /checkbox-group radio-group bindchangeradioChange radio value30rpx color#1976d230rpx/radio radio value40rpx color#1976d240rpx/radio radio value60rpx color#1976d260rpx/radio /radio-groupindex.js 里两个事件函数注意 checkbox 的 e.detail.value 是数组可以多选radio 的 e.detail.value 是单个值Page({ data: { isBold: false, isItalic: false, isUnderline: false, fontSize: 40rpx }, checkboxChange(e) { const values e.detail.value // 数组 this.setData({ isBold: values.indexOf(bold) -1, isItalic: values.indexOf(italic) -1, isUnderline: values.indexOf(underline) -1 }) }, radioChange(e) { this.setData({ fontSize: e.detail.value }) // 单个值 } })跑起来之后勾 加粗 文字立刻变粗勾 下划线 文字下面多一条线点 60rpx 字变大点新加的 30rpx 字变小预览文字样式实时跟着变。做的时候踩了个坑checkbox 如果不放在 checkbox-group 里面单独写一个 checkbox 是不会触发 change 事件的一开始我漏了 group结果怎么点都没反应另外两个组件的 value 属性就是后面事件里取到的值得自己写上不写就是空字符串。总结一下 checkbox 是多选、返回数组radio 是单选、返回单值都得放在对应的 group 里才能拿到 change 事件配合 style 动态绑定就能做出这种所见即所得的控制面板效果。
常数级解法)
