小程序动态改变性别

效果：

方法一：针对于后端返回的是数字格式

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