一、完成效果二、制作流程1.编辑index.wxml文件!--index.wxml-- navigation-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 value30rpx checkedtrue30rpx/radio radio value40rpx40rpx/radio radio value50rpx50rpx/radio radio value60rpx60rpx/radio /radio-group /view /view /scroll-view2.修改app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**app.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; }3.修改index.wxss文件/**index.wxss**/ page { 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; }4.修改index.js文件// index.js Page({ data: { myFontSize: 50rpx }, /** * checkbox-group组件事件函数 */ checkboxChange(e) { console.log(e); // 定义存放checkbox-group所有选中项数组 let selected [] // 定义是否加粗的变量并初始化 let myBold // 定义是否斜体的变量并初始化 let myItalic // 定义是否下划线的变量并初始化 let myUnderline // 获取checkbox-group中的所有选中项 selected e.detail.value // 循环遍历所有的选中项 for (let index 0; index selected.length; index) { const element selected[index]; // 如果加粗的 checkbox 组件被选中 if (element isBold) { myBold bold } // 如果 倾斜 的 checkbox 组件被选中 if (element isItalic) { myItalic italic } // 如果 下划线 的 checkbox 组件被选中 if (element isUnderline) { myUnderline underline } } // 将局部变量的值赋给绑定变量驱动视图层更新 this.setData({ myBold, myItalic, myUnderline }) }, /** * radio-group组件事件函数 */ radioChange(e) { console.log(e); this.setData({ // 设置radio的value值 myFontSize: e.detail.value }) } })三、个人总结希望可以坚持学下去