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

好的，下面是一个简单的实现代码，供您参考：

index.wxml

<view class="container">
  <view class="form">
    <form bindsubmit="submitForm">
      <view class="form-item">
        <text class="label">姓名：</text>
        <input class="input" type="text" name="name" placeholder="请输入姓名" />
      </view>
      <view class="form-item">
        <text class="label">性别：</text>
        <radio-group name="gender">
          <label class="radio-label">
            <radio class="radio" value="男" checked="true" />男
          </label>
          <label class="radio-label">
            <radio class="radio" value="女" />女
          </label>
        </radio-group>
      </view>
      <view class="form-item">
        <text class="label">出生年月：</text>
        <picker mode="date" name="birthday" value="{{ date }}" start="1900-01-01" end="{{ today }}"></picker>
      </view>
      <view class="form-item">
        <text class="label">籍贯：</text>
        <picker mode="region" name="hometown" value="{{ region }}"></picker>
      </view>
      <view class="form-item">
        <text class="label">爱好：</text>
        <checkbox-group name="hobbies">
          <label class="checkbox-label">
            <checkbox class="checkbox" value="篮球" />篮球
          </label>
          <label class="checkbox-label">
            <checkbox class="checkbox" value="足球" />足球
          </label>
          <label class="checkbox-label">
            <checkbox class="checkbox" value="游泳" />游泳
          </label>
        </checkbox-group>
      </view>
      <button class="btn" formType="submit">添加</button>
    </form>
  </view>
  <view class="list">
    <view wx:for="{{ students }}" wx:key="{{ item.id }}">
      <view class="list-item">
        <text class="item-label">姓名：</text><text class="item-value">{{ item.name }}</text>
      </view>
      <view class="list-item">
        <text class="item-label">性别：</text><text class="item-value">{{ item.gender }}</text>
      </view>
      <view class="list-item">
        <text class="item-label">出生年月：</text><text class="item-value">{{ item.birthday }}</text>
      </view>
      <view class="list-item">
        <text class="item-label">籍贯：</text><text class="item-value">{{ item.hometown[0] }} {{ item.hometown[1] }} {{ item.hometown[2] }}</text>
      </view>
      <view class="list-item">
        <text class="item-label">爱好：</text><text class="item-value">{{ item.hobbies.join(', ') }}</text>
      </view>
      <button class="delete" bindtap="deleteStudent" data-id="{{ item.id }}">删除</button>
    </view>
  </view>
</view>

index.js

Page({
  data: {
    students: [],
    date: '',
    region: [],
    today: ''
  },

  onLoad: function () {
    // 获取今天日期
    const today = new Date().toISOString().slice(0, 10);
    this.setData({ today });
  },

  submitForm: function (e) {
    const { name, gender, birthday, hometown, hobbies } = e.detail.value;
    const id = new Date().getTime();
    const student = { id, name, gender, birthday, hometown, hobbies };
    const students = [...this.data.students, student];
    this.setData({ students });
    wx.showToast({ title: '添加成功' });
    this.clearForm();
  },

  deleteStudent: function (e) {
    const { id } = e.currentTarget.dataset;
    const students = this.data.students.filter(student => student.id !== id);
    this.setData({ students });
    wx.showToast({ title: '删除成功' });
  },

  clearForm: function () {
    this.setData({ date: '', region: [] });
  }
})

index.wxss

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx;
}

.form {
  flex: 1;
}

.list {
  margin-top: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.label {
  width: 80rpx;
  font-size: 24rpx;
}

.input,
.radio,
.checkbox,
picker {
  flex: 1;
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
}

.btn {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  outline: none;
}

.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-label {
  width: 80rpx;
  font-size: 24rpx;
}

.item-value {
  flex: 1;
  font-size: 24rpx;
  color: #007aff;
}

.delete {
  display: block;
  margin: 0 auto;
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 24rpx;
  background-color: #ff3b30;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  outline: none;
}

这是一个比较简单的实现，您可以根据自己的需求进行修改和优化。