注释很详细，直接上代码

上一篇

新增内容：（涉及内容较多，建议细看源码）

1.radio-group的使用与数据处理

2.checkbox-group的使用与数据处理

3.picker的使用与数据同步处理(此处示范了地域与日期)

源码：

form.wxml

<!-- 提前准备好的布局结构代码 -->
<view class="register"><view class="legend">信息登记:</view><!-- type里的类型决定手机弹出的输入框的类型--><view class="form-field"><label> 姓名:</label><view class="field"><input type="nickname" placeholder="请输入你的姓名"/></view></view><view class="form-field"><label>性别:</label><view class="field"><!-- 将选项放在一个组才能实现单选 --><!-- 绑定选项改变后的事件处理函数 --><radio-group bindchange="radioChange"><!-- 将选项放在label中可以关联文字和选项框 --><!-- checked可以将该选项设为默认值 --><!-- color属性改变选项的颜色 --><label><radio value="1" checked color="#ffd254"/>男</label><label><radio value="2" color="#ffd254"/>女</label></radio-group></view></view><view class="form-field"><label>爱好:</label><view class="field"><!-- 与radio-group类似，但是是复选框 --><checkbox-group bindchange="checkboxChange"><label><checkbox value="eat" color="#ffd254"/>吃饭</label><label><checkbox value="sleep" color="#ffd254"/>睡觉</label><label><checkbox value="coding" color="#ffd254"/>打代码</label></checkbox-group></view></view><view class="form-field"><label>籍贯:</label><view class="field"><!--1. mode可以设置选择样式内容 2. 选择并不会自动替换文本内容，这里需要监听事件 实现更新--><picker mode="region" bindchange="regionChange"><!-- 如果regionText不为空则显示前面的值，如果为空则显示后面的值 -->{{regionText||"请选择省市区"}}</picker></view></view><view class="form-field"><label>生日:</label><view class="field"><!-- start和end可以限定选择的日期区间，因为生日不会是明天吧 --><picker mode="date" bindchange="dateChange" start="1900-01-01" end="{{endDate}}">{{dateText||"请输入日期"}}</picker></view></view>
</view>

form.js

// 导入不能用绝对路径，否则得从盘符开始
import utils from '../../utils/util'
Page({data:{//储存省市区数据的变量regionText:"请选择省市区",//因为生日不会是未来的某一天，这里日期的上限设为当天//对时间格式的格式化刚好在util.js里面有，这里刚好练习一下外部js的导入endDate:utils.formatTime(new Date()),//储存默认日期数据的变量（此处设置默认为当天）dateText:utils.formatTime(new Date())},// 输出选择项改变时触发的change事件，标志为选中radio的value数组radioChange(e){console.log(e.detail.value);},checkboxChange(e){console.log(e.detail.value);},//省市区选择后改变文本regionChange(e){//获取选择的省市区const text = e.detail.value.join(' ');//更新省市区的内容this.setData({regionText:text})},//日期选择后改变文本dateChange(e){//获取选择的日期const text = e.detail.value;//更新日期的内容this.setData({dateText:text})}}
)

form.wxss

/* 页面整体样式 */
page {padding: 40rpx 30rpx; /* 设置页面上下padding和左右padding*/box-sizing: border-box; /* 设置盒模型 */background-color: #f7f8fa; /* 设置背景颜色为*/}/* 标题样式 */.legend {padding-left: 40rpx; /* 设置左内边距 */font-size: 36rpx; /* 设置字体大小 */color: #333; /* 设置字体颜色 */font-weight: 500; /* 设置字体粗细 */}/* 表单字段样式 */.form-field {display: flex; /* 设置为弹性布局 */margin-top: 20rpx; /* 设置上外边距*/padding: 0rpx 40rpx; height: 88rpx; /* 设置高度 */background-color: #fff; /* 设置背景颜色 */line-height: 88rpx; /* 设置行高 */color: #333; }/* 表单字段标签样式 */.form-field label {width: 160rpx; /* 设置宽度 */}/* 表单字段输入框样式 */.form-field .field {flex: 1; /* 设置弹性元素占据剩余空间 */}/* 输入框样式 */.form-field input {height: 100%; /* 设置高度为父元素高度的 100% */}

util.js

//修改一下原来的函数以符合我们的需求 very good ！const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()//返回-连接的年月日（也就只改了这个地）return `${[year, month, day].map(formatNumber).join('-')}`
}const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}module.exports = {formatTime
}

效果演示：

下一篇