小程序表單頁面

html

<form bindsubmit="formSubmit">
    <view class="main">
        <view class="top-title">基本信息</view>
        <view class="form-content">
            <view class="form-item">
                <view class="left">成員姓名</view>
                <input class="right-input" placeholder="請輸入成員真實姓名" />
            </view>
            <view class="form-item">
                <view class="left">身份證號</view>
                <input class="right-input" placeholder="請輸入身份證號" />
            </view>
            <view class="form-item">
                <view class="left">生存狀態</view>
                <input class="right-input" placeholder="請輸入生存狀態" />
            </view>
            <view class="form-item">
                <text class="left">成員性別</text>
                <view class="sex-box">
                    <radio-group name="sex" bindchange="changeSex">
                        <radio class="radio-item" value="1" checked="checked" color="#DBB975">
                            男
                        </radio>
                        <radio class="radio-item" value="2" checked="" color="#DBB975">女</radio>
                    </radio-group>
                </view>
            </view>
            <view class="form-item">
                <view class="left">與戶主關系</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="請選擇與戶主關系" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">勞動技能</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="請選擇勞動技能" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">在校生情況</view>
                <picker range="{{array}}" bindchange="bindPickerChange">
                    <view class="select-box">
                        <input class="right-input" disabled="{{true}}" value="{{array[index]}}" placeholder="請選擇在校生情況" />
                        <view class="info_more">
                            <image class="more" src="/images/common/more_gray.png" />
                        </view>
                    </view>
                </picker>
            </view>
            <view class="form-item">
                <view class="left">健康情況</view>
                <input class="right-input" placeholder="如健康、殘疾 、長期慢性病" />
            </view>
        </view>
    </view>
    <view class="bottom">
        <button class="save-btn" form-type="submit">保存</button>
    </view>
</form>

css

page {
    background-color: #ffffff;
}

.main {
    margin-left: 30rpx; 
    margin-right: 30rpx;
    .top-title {
        margin-top: 40rpx;
        height: 34rpx;
        line-height: 34rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .form-item {
        height: 120rpx;
        border-bottom: 1rpx solid #e3e3e3;
        display: flex;
        align-items: center; // 垂直居中
        .left {
            width: 210rpx;
            line-height: 120rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: rgba(102, 102, 102, 1);
        }
        .right-input {
            width: 480rpx;
            font-size: 32rpx;
            line-height: 120rpx;
            font-weight: 500;
            color: rgba(170, 170, 170, 1);
            // border: 1rpx solid red;
        }

        .sex-box {
            width: 480rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            .radio-item:nth-child(2) {
                margin-left: 80rpx;
            }
        }

        .select-box {
            display: flex;
            .more {
                width: 14rpx;
                height: 26rpx;
            }
        }

        
    }

    .form-item:last-child { // 必須很純粹，才可以
        border-bottom: 0rpx solid #e3e3e3;
    }
}
.bottom {
    background-color: #f6f6f6;
    padding-top: 70rpx;
    height: 190rpx;
    overflow-y: hidden;
    .save-btn {
        margin-right: 30rpx;
        margin-left: 30rpx;
        width: 690rpx;
        height: 102rpx;
        background: rgba(78, 135, 241, 1);
        border-radius: 6rpx;
        line-height: 102rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
    }
}

js

// pages/tmp/add_member.js
Page({
  formSubmit({ detail: { value } }) {
    console.log('form發生了submit事件，攜帶數據為：', value);
  },
  bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  /**
   * 頁面的初始數據
   */
  data: {
    array:['選項一','選項二','選項三'],
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

小程序中的select，通過picker組件來實現。