info.wxml界面:
<!--主容器--> <view class="info-container"> <!--用户信息--> <form bindsubmit="submitData" > <view class="page-body-setting"> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name"> <text>昵称: </text></view> <view class="info-text"> 长歌</view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name"> <text>姓名: </text></view> <view class="info-text"> <input name="name" class="input-text" /></view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name">性别:</view> <view class="info-text"> <radio-group name="sex"> <radio value="1" checked="true">男</radio> <radio value="0">女</radio> </radio-group> </view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name"> 地址:</view> <view class="info-text"> <input name="address" class="input-text" /></view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name">行业:</view> <view class="info-text"> <picker bindchange="bindIndustryChange" name="industry" value="{{index}}" range="{{array}}"> <view class="picker"> {{array[index]}} </view> </picker></view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name">号码:</view> <view class="info-text"> <input name="phone" class="input-text" maxlength="10" /></view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name">生日:</view> <view class="info-text"> <picker name="birthday" bindchange="bindDateChange" mode="date" value="{{date}}" start="1990-01-01" end="2018-12-31"> <view class="picker"> {{date}} </view> </picker> </view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name">公司:</view> <view class="info-text"> <input name="company" class="input-text" /></view> </view> </view> <view class="page-body-setting-item" > <view class="own-info-item"> <view class="info-name">职位:</view> <view class="info-text"> <input name="work" class="input-text" /></view> </view> </view> <view> <button class="button" form-type="submit">修改信息</button> </view> </view> </form> </view>
info.wxss:
/**用户信息样式**/ .info-container{ background-color:#EFEFF4; height: 100%; } .page-body-setting { margin-top: 12rpx; height: 100%; } .page-body-setting-item { height: 90rpx; background-color: #fff; font-size: 32rpx; line-height: 90rpx; border-bottom-width: 90%; border-bottom: 2px solid #EFEFF4; } .own-info-item{ width: 100%; display: flex; justify-content: space-around; } .info-name{ width: 40%; font-size: 14px; color: gray; text-align: left; margin-left: 10px; } .info-text{ width: 60%; text-align: right; margin-right: 10px; font-size: 14px; color:gray; } .input-text{ margin-top: 20rpx; } .button{ margin-top: 8px; background-color:#00BFFF; color: #FFF; width: 96%; margin-bottom: 10px; } .button-hover { background-color: green; }
info.js:
Page({ /** * 页面的初始数据 */ data: { array:['IT','制造业','互联网','网络设备'], date:"1992-10-12", index:'0' }, /** * 获取表单数据 */ submitData:function(event){ console.log(event.detail.value) wx.showToast({ title: '数据修改成功', }) }, /** * 获取行业数据 */ bindIndustryChange:function(event){ this.setData({ index: event.detail.value }) }, /** * 获取日期数据 */ bindDateChange: function (event) { this.setData({ date: event.detail.value }) }, })
界面效果: