效果:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bf7d676fa40aa722ef027871e33f8066.gif#pic_center)
方法一:针对于后端返回的是数字格式
wxml:
<form bindsubmit="formSubmit">
<view class="dl">
<view class="dt">性别</view>
<view class="twoViewSex">
<picker bindchange="pickSex" value="{{ user_gender }}" class="sex" range="{{ columns }}">
<view class="picker">
{{ columns[gender] == "" ? "请输入性别" : "" }}{{ columns[user_gender] }}
</view>
</picker>
<text></text>
</view>
</view>
</form>
wxss:
.dl{
width: 100%;
display: flex;
align-items: center;
height:10% !important;
border-bottom: 1rpx solid #eee;
position: relative;
}
.dt{
font-size: 32rpx;
}
.twoViewSex{
margin-left: 78%;
display: flex;
align-items: center;
}
js:
data: {
columns: ["女", "男"],
user_gender: 0,
},
onLoad: function (options) {
let key = wx.getStorageSync('key')
let uid = wx.getStorageSync('u')
wx.request({
url: 调的接口 || url,
data: {
k: key,
u: uid
},
method: 'GET',
success: function (res) {
// console.log("性别值 0 男 1 女",res)
if (res.data.status == 200) {
let user_gender = Number(res.data.data.user_gender)
that.setData({
user_gender: user_gender,
})
}
}
})
},
pickSex: function (e) {
this.setData({
user_gender: e.detail.value
})
},
// 保存修改 formSubmit
formSubmit:function(e){
let user_gender = that.data.user_gender
wx.request({
url: 调的接口 || url',
data: {
k: key,
u: uid,
user_gender: user_gender,
},
})
}
方法二:针对后端返回的英文格式 + 从本地取的数据
wxml:
<!-- 我的昵称 -->
<view class="personal-box">
<view>我的昵称</view>
<view class="twoViews">
<input bindinput="bindKeyInput" value="{{userInfo.name}}" placeholder="请设置昵称" />
</view>
</view>
<!-- 性别 -->
<view class="personal-box">
<view class="left">性别</view>
<view class="twoViews">
<picker bindchange="bindPickerChange" value="{{gender}}" range="{{columns}}">
<view class="picker">
{{columns[gender]}}
</view>
</picker>
<van-icon name="arrow" color="#999999" size="20px" />
</view>
</view>
js:
data: {
user_id: 0,
columns: ["未知", "男", "女", '混合'],
gender: 0,
userInfo: {},
},
onLoad: function (options) {
let userInfo = wx.getStorageSync('user_info');
let gender = 0;
if(userInfo.gender == 'NA'){
gender = 0;
} else if (userInfo.gender == 'BOY') {
gender = 1;
} else if (userInfo.gender == 'GIRL') {
gender = 2;
} else if (userInfo.gender == 'MIX') {
gender = 3;
}
this.setData({
user_id: wx.getStorageSync('user_id'),
userInfo: userInfo,
gender:gender
})
},
// 保存修改
Submit: function () {
let _this = this;
utils.c2s({
urlType: 'shop',
url: '/user.php?call=info.index',
data: {
id: this.data.user_id,
name: _this.data.userInfo.name,
gender: _this.data.userInfo.gender,
},
success: function (res) {
wx.setStorageSync('user_info', _this.data.userInfo)
wx.showToast({
title: '编辑成功',
icon: 'success',
duration: 3000 //持续的时间
})
setTimeout(function () {
wx.navigateBack()
}, 2000)
}
})
},
// 编辑昵称
bindKeyInput: function (e) {
this.setData({
'userInfo.name': e.detail.value
})
},
// 切换性别
bindPickerChange: function (e) {
if (e.detail.value == 0) {
this.data.userInfo.gender = 'NA'
} else if (e.detail.value == 1) {
this.data.userInfo.gender = 'BOY'
} else if (e.detail.value == 2) {
this.data.userInfo.gender = 'GIRL'
} else if (e.detail.value == 3) {
this.data.userInfo.gender = 'MIX'
}
this.setData({
gender: e.detail.value
})
},