小程序表单开发

info.wxml界面：

 
  
  
    昵称:  
   长歌
  
  

  
  
    姓名:  
   
  
  

  
  
  性别:
  
  
  
  男
  女
  
  
  
  

  
  
   地址:
    
  
  

    
  
  行业:
   
    
 {{array[index]}}
    
  
  
  

  
  
  号码:
    
  
  

  
  
  生日:
  
    
    
{{date}}
    
  
  
  
  
  

  
  
  公司:
   
  
  

  
  
  职位:
    
  
   

  
  修改信息
  

  
  

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
    })
  },
})



 

界面效果：