一 概述
- 个人资料修改对应的页面为:
pages/modify/modify
- 页面搭建
- 页面逻辑
二 页面搭建
2.1 布局文件(modify.wml)
<form bindsubmit="formSubmit" report-submit="true">
<!--姓名-->
<view class="section">
<view class="section-title">姓名:</view>
<view>
<input type="text" name="username" value="{{username}}" placeholder="请输入姓名"/>
</view>
</view>
<!--性别-->
<view class="section">
<view class="section-title">性别:</view>
<view>
<radio-group name="gender">
<label><radio value="男" checked="{{gender=='男'?'checked':''}}"/>男</label>
<label><radio value="女" checked="{{gender=='女'?'checked':''}}"/>女</label>
</radio-group>
</view>
</view>
<button form-type="submit" type="primary">保存</button>
</form>
2.2 页面样式文件(modify.wxss)
page{
font-size: 32rpx;
}
.section{
padding: 40rpx;
border-bottom: 1px solid gray;
}
.section:last-child{
border: none;
}
.section-title{
width: 20%;
float: left;
}
label{
padding: 0 20rpx;
}
三 页面逻辑—modify.js
Page({
/**
* 页面的初始数据
*/
data: {
username: '',
gender: '男'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
//收到数据后使用decodeURIComponent()解码
username: decodeURIComponent(options.username),
gender: decodeURIComponent(options.gender)
})
},
//保存按钮
formSubmit:function(e){
//表单返回的所有数据
var formData=e.detail.value;
//获取上一个页面的对象
var pages=getCurrentPages()
var prevPage=pages[pages.length-2]
//调用上一个页面的setData()方法,把数据存储到上一个页面中去
prevPage.setData({
username:formData.username,
gender:formData.gender
})
//返回上一个页面
wx.navigateBack()
}
})
四 源码
- 源码
- 物流查询服务器
更多推荐
微信小程序开发之——个人中心-个人资料修改(7)
发布评论