wxss

.container {
  height:100vh;  /*高度为100视窗，写为100%无效*/
  background-color:white;  /*背景颜色*/
  display: flex;  /*flex布局模型*/
  flex-direction: column;  /*垂直布局*/
  padding: 20rpx 20rpx;  /*上下外边距为20rpx，左右为20rpx*/
  align-content: center; /*居中对齐*/
  justify-content:center;
}
/*列表组样式*/
.listGroup {
  background-color:white;  /*背景颜色*/
  margin: 20rpx 0;  /*上下外边距为20rpx，左右为0*/
}
.row{
  display: flex;
  flex-direction:row;
}
/*列表项单行样式*/
.box {
  width:62vh;  /*宽度为62视窗，写为100%无效*/
  border-bottom:1rpx solid silver;  /*1rpx宽的银色实线边框*/
  padding: 10rpx;  /*内边距10rpx*/
  height:80rpx;
}
.shortInput {
  width:30vh;
}
.label{
  color:#FF2D55;
  margin-right:25rpx;
}
wxml
<view class='container'>
  <view class='listGroup' >
    <view class='row box' >
      <text>待定</text>
    </view>
  </view>
  <view class='listGroup' >
    <view class='row box' >
     <label>姓别</label>
     <picker name='sex'mode='selector'bindchange='sexChange'range='{{sexItem}}'>
       <view>{{sexItem}}</view>
     </picker>
    </view>
    <view class='row box' >
      <label>年龄</label>
      <picker name='age'mode='selector'bindchange='ageChange'range='{{ageItem}}'>
       <view>{{ageItem}}</view>
     </picker>
    </view>
    <view class='row box' >
      <label>类别</label>
      <picker name='genre'mode='selector'bindchange='genreChange'range='{{genreItem}}'>
       <view>{{genreItem}}</view>
     </picker>
    </view>
  </view>
  <view class='listGroup' >
    <view class='row box' >
      <label>身高</label>
      <input name='height'class='shortInput'type='digit'value='{{height}}'></input>
      <text>厘米</text>
    </view>
    <view class='row box' >
      <label>体重</label>
      <input name='weight'class='shortInput'type='digit'value='{{weight}}'></input>
      <text>千克</text>
    </view>
  </view>
</view>
js
Page({
  data: {
    sexItem:['男','女'],
    ageItem:['24岁以下','25-29岁','30-39岁','40-49岁','50-59岁','60岁以上'],
    genreItem:['一类人员','二类人员','三类人员']
  },
  "getInput":function(e){
    console.log("getInput触发，输入框内容改变，当前值为:"+e.detail.value);
  },
  "sexChange":function(e){
    let i=e.detail.value;            //获取选项的数组下标
    let value=this.data.sexItem[i];  //获取选项的值
    this.setData({selector:value});  //将选项的名称更新到WXML页面上
  },
  "ageChange":function(e){
    let i=e.detail.value;            //获取选项的数组下标
    let value=this.data.ageItem[i];  //获取选项的值
    this.setData({selector:value});  //将选项的名称更新到WXML页面上
  },
  "genreChange":function(e){
    let i=e.detail.value;            //获取选项的数组下标
    let value=this.data.genreItem[i];  //获取选项的值
    this.setData({selector:value});  //将选项的名称更新到WXML页面上
  }
})