這次做的是微信小程序的 checkbox 和 radio 組件需求是上面一段預(yù)覽文字下面放三個(gè)復(fù)選框和幾個(gè)單選按鈕勾選復(fù)選框控制文字加粗、斜體、下劃線點(diǎn)單選按鈕控制字號(hào)大小。做之前以為要每個(gè)按鈕都綁一個(gè)事件寫完才發(fā)現(xiàn)官方已經(jīng)提供了 checkbox-group 和 radio-group直接監(jiān)聽組的 change 事件就能拿到所有選中項(xiàng)特別方便。作業(yè)要求在原來 40rpx、60rpx 的基礎(chǔ)上再加一個(gè) 30rpx 的選項(xiàng)加一個(gè) radio 標(biāo)簽就行。頁面 index.wxml 大概是這樣預(yù)覽文字的 style 直接用三元表達(dá)式動(dòng)態(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}}; 這是一段預(yù)覽文字勾選復(fù)選框改變樣式點(diǎn)單選按鈕改變字號(hào)。 /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 里兩個(gè)事件函數(shù)注意 checkbox 的 e.detail.value 是數(shù)組可以多選radio 的 e.detail.value 是單個(gè)值Page({ data: { isBold: false, isItalic: false, isUnderline: false, fontSize: 40rpx }, checkboxChange(e) { const values e.detail.value // 數(shù)組 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 }) // 單個(gè)值 } })跑起來之后勾 加粗 文字立刻變粗勾 下劃線 文字下面多一條線點(diǎn) 60rpx 字變大點(diǎn)新加的 30rpx 字變小預(yù)覽文字樣式實(shí)時(shí)跟著變。做的時(shí)候踩了個(gè)坑checkbox 如果不放在 checkbox-group 里面單獨(dú)寫一個(gè) checkbox 是不會(huì)觸發(fā) change 事件的一開始我漏了 group結(jié)果怎么點(diǎn)都沒反應(yīng)另外兩個(gè)組件的 value 屬性就是后面事件里取到的值得自己寫上不寫就是空字符串?？偨Y(jié)一下 checkbox 是多選、返回?cái)?shù)組radio 是單選、返回單值都得放在對(duì)應(yīng)的 group 里才能拿到 change 事件配合 style 動(dòng)態(tài)綁定就能做出這種所見即所得的控制面板效果。