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组件来实现。
