這次做的是微信小程序的 checkbox 和 radio 組件需求是上面一段預覽文字下面放三個復選框和幾個單選按鈕勾選復選框控制文字加粗、斜體、下劃線點單選按鈕控制字號大小。做之前以為要每個按鈕都綁一個事件寫完才發(fā)現官方已經提供了 checkbox-group 和 radio-group直接監(jiān)聽組的 change 事件就能拿到所有選中項特別方便。作業(yè)要求在原來 40rpx、60rpx 的基礎上再加一個 30rpx 的選項加一個 radio 標簽就行。頁面 index.wxml 大概是這樣預覽文字的 style 直接用三元表達式動態(tài)綁定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 是不會觸發(fā) change 事件的一開始我漏了 group結果怎么點都沒反應另外兩個組件的 value 屬性就是后面事件里取到的值得自己寫上不寫就是空字符串。總結一下 checkbox 是多選、返回數組radio 是單選、返回單值都得放在對應的 group 里才能拿到 change 事件配合 style 動態(tài)綁定就能做出這種所見即所得的控制面板效果。