微信小程序把页面分为上下两部分，上部为表单，下方为列表，在表单中输入学生学籍信息，点击添加按钮，把学籍信息添加到列中显示，并清空表单输入的数据。 * 学籍信息包括 * 姓名：text * 性别 :radio * 出生年月 :picker * 籍贯:picker * 爱好:checkbox * 提示，学籍信息可以定义为数组，每个学生信息为一个对象，每添加一个学生，就创建一个对象，并把对象添加到数组中，页面的列表使用循环输出数组中的对象

好的，我可以再次给出一个更具体的代码实现方案，供您参考。 wxml 文件代码： ```html <view class="container"> <form> <view class="form-item"> <label>姓名：</label> <input type="text" placeholder="请输入姓名" bindinput="onNameInput"/> </view> <view class="form-item"> <label>性别：</label> <radio-group bindchange="onGenderChange"> <radio value="male" checked="{{gender==='male'}}">男</radio> <radio value="female" checked="{{gender==='female'}}">女</radio> </radio-group> </view> <view class="form-item"> <label>出生年月：</label> <picker mode="date" start="1970-01-01" end="{{endDate}}" value="{{birthDate}}" bindchange="onBirthDateChange"> {{birthDate}} </picker> </view> <view class="form-item"> <label>籍贯：</label> <picker mode="region" value="{{nativePlace}}" bindregionchange="onNativePlaceChange"></picker> </view> <view class="form-item"> <label>爱好：</label> <checkbox-group bindchange="onHobbyChange"> <checkbox value="reading" checked="{{hobby.indexOf('reading')!==-1}}">阅读</checkbox> <checkbox value="music" checked="{{hobby.indexOf('music')!==-1}}">音乐</checkbox> <checkbox value="sports" checked="{{hobby.indexOf('sports')!==-1}}">运动</checkbox> </checkbox-group> </view> <view class="form-item"> <button type="primary" bindtap="onAddStudent">添加</button> </view> </form> <view class="list"> <view class="list-item" wx:for="{{students}}" wx:key="index"> <view class="item-row"> <label>姓名：</label> <text>{{item.name}}</text> </view> <view class="item-row"> <label>性别：</label> <text>{{item.gender}}</text> </view> <view class="item-row"> <label>出生年月：</label> <text>{{item.birthDate}}</text> </view> <view class="item-row"> <label>籍贯：</label> <text>{{item.nativePlace}}</text> </view> <view class="item-row"> <label>爱好：</label> <text>{{item.hobby.join(',')}}</text> </view> </view> </view> </view> ``` js 文件代码： ```javascript Page({ data: { name: '', gender: 'male', birthDate: '', nativePlace: [], hobby: [], students: [], endDate: new Date().toISOString().slice(0, 10), }, onNameInput: function(e) { this.setData({ name: e.detail.value }); }, onGenderChange: function(e) { this.setData({ gender: e.detail.value }); }, onBirthDateChange: function(e) { this.setData({ birthDate: e.detail.value }); }, onNativePlaceChange: function(e) { this.setData({ nativePlace: e.detail.value }); }, onHobbyChange: function(e) { this.setData({ hobby: e.detail.value }); }, onAddStudent: function() { if (!this.data.name) { wx.showToast({ title: '姓名不能为空', icon: 'none', }); return; } let student = { name: this.data.name, gender: this.data.gender, birthDate: this.data.birthDate, nativePlace: this.data.nativePlace.join(' '), hobby: this.data.hobby, }; let students = this.data.students; students.push(student); this.setData({ students: students, name: '', gender: 'male', birthDate: '', nativePlace: [], hobby: [], }); }, }); ``` css 文件代码： ```css .container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20rpx; } .form-item { display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx; } .form-item label { width: 120rpx; font-size: 28rpx; } .list { display: flex; flex-direction: column; margin-top: 40rpx; } .list-item { display: flex; flex-direction: column; background-color: #fff; border: 1rpx solid #ccc; border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; } .item-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 10rpx; } .item-row label { font-size: 24rpx; color: #666; width: 120rpx; } .item-row text { font-size: 24rpx; color: #333; flex: 1; } ``` 注：上面的代码实现是基于微信小程序原生开发框架实现的，如果您使用的是其他框架或库，可能会有所不同。